I want to render a red square, then apply a globalCompositeOperation = 'source-in' between a blue square and a lime square, and then resume 'normal' rendering, i.e. without the clipping / compositing applied. How can I achieve this? The only way I've gotten it to work is by rendering multiple canvases on top of each other, and applying the clipping / compositing in a separate canvas.
In this fiddle, the second canvas visually shows the effect I'm after.
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);
