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; 
});