HTML5画布 - 如何清除和重绘具有重叠实体的区域？

Question

到目前为止，我已经在每个动画帧的单个画布上清除/重绘所有内容，这自然非常昂贵。我一直倾向于使用多个画布的想法，每个画布代表游戏中的不同层，并且只重绘画布中已经改变的区域。这有可能大大减少游戏中的清理和重绘量（并随后提高性能），但是我预见到了这个问题。

将游戏组件拆分成层很好，但是如果有一组实体可以移动，那么有时候一个移动实体会与一个移动实体重叠。由于不动的人没有改变，因此不会安排重绘。移动实体移动后清除的固定实体图像部分永远不会重新绘制（见下图）。

黑色静止背景图层+具有移动实体的前景图层。白色实体正在移动，但黄色实体不是。

由于黄色实体不移动，通常可以肯定地说其区域中的像素没有改变。但是，白色实体的移动会导致某些像素被清除。

以下是我提出的解决方案：

1）像之前一样，清除并重绘整个画布，但仅适用于具有移动实体的图层。在我的游戏中，4层中的1层符合此类别。

2）计算对象何时重叠，并在这些情况下清除/重绘两个区域。

3）将静止实体暂时移动到背景图层并正常处理。

每个解决方案的评论：

1）这个解决方案感觉它没有足够的性能提升来保证重新设计。

2）这感觉就像一种更有效的方法，但仍需要在所有实体之间进行测试，以确定它们的边界是否发生碰撞。如果实体的数量足够大，则必须通过将画布分割为区域并单独处理每个区域来进一步改进。

3）这种方法给了我在静止实体上绘制移动实体的理想结果，但是它与解决方案2一样有效吗？

还有其他可能更好的解决方案吗？

根据Blindman67的要求，这是我的抽奖代码：

Sprite.prototype.draw = function()
{
    if (this.hasImage())
    {
        if (this.opacity == 1)
        {
            this.drawImage()
        }
        else
        {
            game.ctx.globalAlpha = this.opacity;
            this.drawWithTransparency();
            game.ctx.globalAlpha = 1;
        }
    }
}

Sprite.prototype.drawImage = function()
{
    game.ctx.drawImage(
        this.image, 
        this.position.x, 
        this.position.y, 
        this.image.width, 
        this.image.height
    );
}

我在每次更新开始时清理画布一次。