Canvas Compositing
globalCompositeOperation controls how new drawings blend with existing canvas pixels. The default is source-over (new draws on top).
HTML
Advanced
6 min read
Canvas Compositing Operations
Example
const ctx = canvas.getContext("2d");
// Draw base blue rectangle
ctx.fillStyle = "#007bff";
ctx.fillRect(50, 50, 150, 150);
// New draws will cut out (erase) from existing content
ctx.globalCompositeOperation = "destination-out";
ctx.arc(125, 125, 60, 0, Math.PI * 2);
ctx.fill();
// Reset to default
ctx.globalCompositeOperation = "source-over"; Pro Tip
destination-out is excellent for creating cutout mask effects; multiply for blending colors like Photoshop layers.