Javascript HTML5画布剪辑不正确？

我想知道下面的代码是否会产生适当的行为。我觉得左上角的正方形应该还是绿色的。也就是说，如果我剪裁一个区域，十次恢复，然后在第二个区域中绘制，画布将在两个区域中绘制。为什么?

---

实际上，您并没有使用第二个

ctx.save（）

打开第二个剪辑路径；为此，您需要调用

ctx.beginPath（）

在每个单独的路径命令集之前使用

ctx.beginPath

，否则后续的

stroke/fill

将重新绘制自上一个beginPath以来的所有内容。非常感谢你们两位。显然，我必须更好地理解这个主题！显然，这是可行的！

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