canvas - 是否可以在两个形状之间应用 clip() 或 globalCompositeOperation()，然后停止剪辑/合成？

Question

我想渲染一个红色方块，然后在蓝色方块和石灰方块之间应用 globalCompositeOperation = 'source-in'，然后恢复“正常”渲染，即不应用剪切/合成。我怎样才能做到这一点？我让它工作的唯一方法是在彼此之上渲染多个画布，并在单独的画布中应用剪辑/合成。

在这个fiddle中，第二个画布直观地显示了我所追求的效果。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 40, 40);

// I want to apply globalCompositeOperatoin = 'source-in' 
// only on the blue and lime squares

ctx.fillStyle = 'blue';
ctx.fillRect(80, 20, 40, 40);

ctx.fillStyle = 'lime';
ctx.fillRect(90, 30, 40, 40);

// And then resume normal rendering

ctx.fillStyle = 'red';
ctx.fillRect(140, 20, 40, 40);