ctx.fillRect不会覆盖以前的画布内容

Question

我有一个绘图功能，通过调用其上下文的fillRect()函数在整个画布上绘制一个彩色矩形，然后调用一个对象中的方法，该对象由其构造函数传递给相同的上下文，它在这个对象的sx和y坐标上绘制一个矩形。绘制函数循环。

我希望看到以下内容：

1. fillRect()覆盖整个画布

2. rect()（称为对象的方法）在指定位置绘制一个矩形

3. fillRect()会覆盖整个画布，包括绘制的矩形

4. rect()（称为对象的方法）在指定位置绘制一个矩形

5. ...

可悲的是，fillRect()从未实际绘制过＆＃34;以上＆＃34;从这些对象内的对象位置绘制的矩形＆＃39;方法

重现此意外行为的代码大约有60行，因此我会链接jsfiddle而不是将其包含在此处。通过单击画布，您可以创建要绘制的新对象。他们在屏幕上漫步（留下痕迹，这就是问题）并在屏幕外被移除（但他们的踪迹将永远可见）。唯一不能看到其痕迹的时间是未调用对象内的绘制方法（屏幕上没有对象），但是一旦创建了新对象，所有之前的痕迹都会重新出现。 / p>

我使用的东西类似于c风格的链表（我知道我不应该）存储应该绘制的对象。

为方便起见，

jsfiddle再次链接。