HTML5 Canvas strokeStyle from createPattern

Question

然后我使用大画布图像和createPattern for strokestyle我有滞后。 有两种款式：铅笔和橡皮擦（橡皮擦是从其他的帆布风格createrPattern）

演示：http://jsfiddle.net/y059fujd/

这是代码的地方，然后我创建的风格模式：

$("#eraser").click(function() { 
    ctx.lineWidth = 5; 
    ctx.globalCompositeOperation = "source-over"; 
    ctx.strokeStyle = ctx.createPattern(canvasBig, 'no-repeat');  
}); 

Answer 1

其实有代码中存在以下几个问题：
- canvasBig太大，速度变慢，甚至在某些浏览器/设备上可能会中断。
- 您正在每个按钮单击创建一个模式：请注意，创建模式需要复制内容，因为它可能随后发生更改。所以这里正在进行大量无用的工作。
- 各种图像/画布大小不匹配，所以擦除无法工作。
- 我不明白你为什么需要3个画布作为绘制区域+备份，但我想你会稍后使用大画布来做其他事情。最好的是在这个新功能之前已经使得绘图/擦除工作正常。

所有这一切都固定在这里：

http://jsfiddle.net/y059fujd/4/

var img = new Image(); 
img.onload = function() { 
    ctx.drawImage(img, 0, 0, img.width, img.height); 
    ctxBackup.drawImage(img, 0, 0, 700, 500); 
    imgPattern = ctx.createPattern(img, "no-repeat"); 
}; 

// 
$("#eraser").click(function() { 
    ctx.lineWidth = 5; 
    ctx.globalCompositeOperation = "source-over"; 
    ctx.strokeStyle = imgPattern; 
});