画布保存像素绘制出视图制造

Question

我使用HTML5画布和JavaScript来在屏幕上绘制一些东西。然而，因为我画的有时会很大，所以我有一个平移功能。

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

我使用的toDataURL()功能，节省得出的数据，并重绘作为使用drawImage()图像。

该应用程序可以找到here。

Answer 1

发生这种情况是因为您将它拖动到“低于”渲染边界。

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

由于空白空间没有用纯色填充，因此它保持原样，因为它在缓冲区中。

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