Complex shapes
suggest changeIt’s possible to clear complex shaped regions by changing the globalCompositeOperation property.
// All pixels being drawn will be transparent
ctx.globalCompositeOperation = 'destination-out';
// Clear a triangular section
ctx.globalAlpha = 1; // ensure alpha is 1
ctx.fillStyle = '#000'; // ensure the current fillStyle does not have any transparency
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(0, 10);
ctx.lineTo(20, 10);
ctx.fill();
// Begin drawing normally again
ctx.globalCompositeOperation = 'source-over';
Found a mistake? Have a question or improvement idea?
Let me know.
Table Of Contents