Javascript 在图像上绘制时的像素问题-html5画布

首先，这里是关于JSFIDLE的完整代码：

重现我的问题：

在图像中单击并随机拖动鼠标，而不释放鼠标右键

您将看到它在图像上留下痕迹

如何在每次都不重新加载图像的情况下清除所有跟踪（这将使我的浏览器滞后于较大尺寸的图像）

其思想是在每次添加新矩形时清除跟踪，但不重新加载图像

我试过：

ctx.clearRect(0, 0, canvas.width, canvas.height);

没有效果。。。这将删除矩形

---

您有什么建议吗？

当鼠标移动时，您正在图像上绘制，您无法用简单的方式撤消它，例如，当有人缩小其选择时。最快的修复方法就是在图像上使用一些

div

。释放鼠标后-然后删除div并绘制图像最终选择。

无需重新加载图像，只需重新绘制图像对象即可。您还可以在顶部使用辅助画布元素，绘制+清除矩形，释放鼠标时使用主画布上的最终区域。辅助画布将需要在其上加载相同的图像+绘制对象。。。图像重新加载比这更好。重新绘制对象并不能解决这个问题。第二个画布不需要任何东西-它将是透明的，这样图像就会显示出来。我已经用

drawAll（）重新绘制了它们

@K3N怎么做？我不明白你的方法，你能开发一下吗？我只是提出了你的想法，但不起作用，检查这里：当我创建一个矩形时，我会自动在它上面显示一个透明的画布，然后隐藏它。。。这没有效果。