我可以在不破壞先前繪製的畫布元素的情況下畫一個畫布元素嗎？

Question

說我想畫的東西在畫布：

function draw() { 

    var canvas = document.getElementById('myCanvas'); 

    ctx = canvas.getContext('2d'); 
    ctx.canvas.width = 100; 
    ctx.canvas.height = 100; 

    ctx.fillStyle = 'red'; 

    ctx.fillRect(0, 0, 50, 50); 

} 

但後來在我想提請東西就可以了別人以後，

function drawMore() { 

    var canvas = document.getElementById('myCanvas'); 

    ctx = canvas.getContext('2d'); 
    ctx.canvas.width = 100; 
    ctx.canvas.height = 100; 

    ctx.fillStyle = 'blue'; 

    ctx.fillRect(50, 50, 50, 50); 

} 

反正我能做到這一點，而不破壞先前繪製的藍色塊，而不必顯式重繪以前的內容（例如，我實際上不知道它的內容）。

謝謝！

Answer 1

刪除這些行：

ctx.canvas.width = 100; 
ctx.canvas.height = 100; 

你並不需要重置的高度，每次寬度。 Example

設置寬度實際上是清除畫布的一個技巧。