No Login Data Private Local Save

Canvas Compositing Demo - Online Blend & Clip Visual

27
0
0
0

Canvas Compositing Demo

Visualize all 26 globalCompositeOperation blend modes & clip paths in real-time

ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = '#5b9bd5'; ctx.fillRect(220, 160, 310, 180); ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = '#e8734a'; ctx.beginPath(); ctx.arc(420, 250, 95, 0, Math.PI * 2); ctx.fill();
Blend Controls
Bottom layer
Top layer

Drag the orange circle on the canvas to move it

Frequently Asked Questions

globalCompositeOperation is a Canvas 2D API property that determines how new drawings (the source) are blended with existing content (the destination). It supports 26 distinct modes—ranging from simple layering (source-over) to complex color blending (multiply, screen, overlay) and compositing math (xor, difference). This property is essential for creating masks, blend effects, and non-destructive editing workflows directly in the browser.
Destination is the content already drawn on the canvas (the bottom layer). Source is the new content you're about to draw (the top layer). The composite operation controls how the source pixels interact with the destination pixels. For example, source-over places source on top (default behavior), while destination-over draws source behind the existing content.
The most popular modes include: source-over (default layering), multiply (darkens—great for shadows), screen (lightens—ideal for highlights), overlay (adds contrast), xor (creates cutout effects), and lighter (additive blending for glow effects). Designers familiar with Photoshop or Figma will recognize these as the standard blend mode equivalents.
The clip() method creates a clipping region from the current path. Once set, all subsequent drawings are restricted to that region—anything outside is not rendered. You can create circular, rectangular, or any arbitrary clip shape. Use save() and restore() to manage clip states. Clipping is ideal for creating masks, rounded image crops, or spotlight effects.
All 26 globalCompositeOperation values are part of the HTML5 Canvas specification and are supported in all modern browsers (Chrome, Firefox, Safari, Edge). The basic compositing modes have been supported since IE9+. The newer blend modes (multiply, screen, overlay, etc.) gained full cross-browser support around 2015–2016. For production use, the feature is safe to rely on.
Absolutely! You can use clip() to define a region, and then apply any globalCompositeOperation within that clipped area. This powerful combination enables complex effects like masked blend layers, textured cutouts, and selective compositing. The typical pattern is: save() → clip() → set compositeOperation → draw → restore().
lighter (additive blending) simply adds the color values of source and destination, which can exceed pure white (values clamp at 255). This creates a bright, often washed-out glow effect. screen uses a mathematical formula (1 - (1-src)*(1-dst)) that produces a softer, more natural lightening effect that never clips. Screen is generally preferred for photo compositing, while lighter works well for particle effects and LED-style glows.
🔧 Related Tools