HTML5 Canvas裁剪不正確？

Question

我想知道如果下面的代碼產生適當的行爲。我覺得左上角的廣場應該仍然是綠色的。也就是說，如果我裁剪一個區域，十次還原，然後在第二個區域中繪製，則畫布在兩個區域中繪製。爲什麼？

https://jsfiddle.net/s6t8k3w3/

var my_canvas = document.getElementById('canvas'); 
var ctx = my_canvas.getContext("2d"); 

//Make Clipping Path 1 
ctx.save(); 
ctx.rect(20, 20, 100, 100); 
ctx.clip(); 

//Fill Background with Green 
ctx.fillStyle = 'rgba(0,255,0,1)'; 
ctx.fillRect(0, 0, my_canvas.width, my_canvas.height); 
//Close Clipping Path 1 
ctx.restore(); 

//Open Clipping Path 2 
ctx.save(); 
ctx.rect(50, 50, 100, 100); 
ctx.clip(); 

//Fill background with Blue 
ctx.fillStyle = 'rgba(0,0,255,1)'; 
ctx.fillRect(0, 0, my_canvas.width, my_canvas.height); 

//Draw Line 
ctx.beginPath(); 
ctx.moveTo(0, 0); 
ctx.lineTo(500, 500); 
ctx.stroke(); 

//CloseClipping Path 2 
ctx.restore(); 

Answer 1

你不是真正打開第二個剪輯路徑與第二ctx.save();要做到這一點，你需要撥打ctx.beginPath()