画布保存从视图伪影中绘制的像素

Question

我使用html5画布和javascript在屏幕上绘制一些东西。然而，由于我的绘图有时会很大，我有一个平移功能。

问题是，当绘图在顶部或左侧部分离屏时，我会得到一个奇怪的神器。

我使用toDataURL()功能保存绘制的数据，并使用drawImage()将其重绘为图像。

可以找到该应用here。

Answer 1

发生这种情况是因为你将它拖得比渲染边界“低”。

 =====================
 emtpy with artifacts
 empty with artifacts
 _____________________________
 start of your canvas drawing

因为空白空间没有填充纯色，所以它保持在缓冲区中。

只需检测绘图窗格的边缘，并在拖动后绘制低于视图端口时用填充填充其余可见视口。