Chapter 52: Canvas Compositing
1. What is “Canvas Compositing” actually?
Canvas compositing (also called global composite operation or blending modes) controls how new drawings interact with what is already on the canvas.
In simple words:
When you draw something new (a circle, text, image, rectangle…), Canvas normally just puts it on top (like stacking paper).
But with compositing you can tell Canvas:
- “Only show the new drawing where it overlaps old stuff”
- “Use new drawing to erase old stuff”
- “Make new drawing multiply colors with old stuff”
- “Only keep the lighter / darker parts”
- “Add glow / screen effect”
It is exactly like layer blending modes in Photoshop (Multiply, Screen, Overlay, Destination-out, etc.).
This is one of the most powerful hidden features of Canvas — it lets you create:
- Masks / cutouts without clipPath
- Glow / neon / soft light effects
- Erase parts with shapes
- Gradient masks
- Image composition tricks
- Game effects (light sources, explosions, water reflections)
- Modern UI (glass, overlay text, vignette)
The magic property is:
JavaScript
|
0 1 2 3 4 5 6 |
ctx.globalCompositeOperation = "source-over"; // default |
You change this value before drawing, and it affects everything drawn until you change it again.
2. The Most Important globalCompositeOperation Modes (With Visual Explanation)
Here are the 12 most useful modes in 2025–2026 (all supported in modern browsers).
| Mode name | What happens when you draw new shape on old content | Best real use cases | Visual memory hook |
|---|---|---|---|
| source-over (default) | New shape goes on top of old content | Normal drawing (most cases) | “New on top” |
| destination-over | New shape goes behind old content | Draw background after foreground | “New under old” |
| source-in | Only keep new shape where it overlaps old | Fill shape with pattern/image inside old shape | “New only inside old” |
| destination-in | Only keep old content where new shape overlaps | Use shape as mask / cutout on existing drawing | “Old only inside new” (masking) |
| source-out | New shape except where it overlaps old | Erase / cut holes with new shape | “New everywhere except inside old” |
| destination-out | Old content except where new shape overlaps | Erase with new shape (most common erase) | “Old everywhere except inside new” |
| source-atop | New shape only on top of old (old unchanged) | Overlay color/tint only where old content exists | “New only on old” |
| destination-atop | Old content only on top of new | Reverse source-atop | “Old only on new” |
| lighter | Add colors together (like screen) | Glows, light effects, explosions | “Add / brighten” |
| multiply | Darken (multiply colors) | Shadows, dark overlays, multiply blend | “Darken / multiply” |
| screen | Lighten (like lighten blend) | Highlights, soft glows | “Lighten / screen” |
| xor | Where only one exists (exclusive or) | Special effects, XOR masks | “Only where one layer is present” |
Most used modes in real projects (2025–2026):
- source-over → default / normal
- destination-out → erase / cut holes
- source-in / destination-in → masking / filling inside shape
- lighter / screen → glow / light effects
- multiply → shadows / dark blend
3. Your First Canvas Compositing Example – Erase & Mask (Copy-Paste & Run)
This demo shows the two most important modes students use 90% of the time.
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Compositing – Erase & Mask</title> <style> canvas { border: 4px solid #2c3e50; background: #ecf0f1; display: block; margin: 30px auto; } h1 { text-align: center; color: #34495e; } button { margin: 10px; padding: 12px 24px; font-size: 18px; } </style> </head> <body> <h1>Canvas Compositing – See Blending Modes</h1> <canvas id="compCanvas" width="700" height="500"></canvas> <div style="text-align:center"> <button id="eraseBtn">Erase with destination-out</button> <button id="maskBtn">Mask with destination-in</button> <button id="resetBtn">Reset Canvas</button> </div> <script> const canvas = document.getElementById('compCanvas'); const ctx = canvas.getContext('2d'); const eraseBtn = document.getElementById('eraseBtn'); const maskBtn = document.getElementById('maskBtn'); const resetBtn = document.getElementById('resetBtn'); function drawBaseScene() { // Background gradient const bg = ctx.createLinearGradient(0, 0, 0, canvas.height); bg.addColorStop(0, '#3498db'); bg.addColorStop(1, '#1e90ff'); ctx.fillStyle = bg; ctx.fillRect(0, 0, canvas.width, canvas.height); // Big yellow circle ctx.beginPath(); ctx.arc(350, 250, 180, 0, Math.PI * 2); ctx.fillStyle = '#f1c40f'; ctx.fill(); ctx.strokeStyle = '#d35400'; ctx.lineWidth = 12; ctx.stroke(); // Text ctx.font = 'bold 60px Arial'; ctx.fillStyle = '#2c3e50'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Original Scene', 350, 250); } // Initial draw drawBaseScene(); // === Erase button – destination-out (cut hole) === eraseBtn.addEventListener('click', () => { ctx.save(); ctx.globalCompositeOperation = 'destination-out'; // Draw black circle → erases where it overlaps ctx.beginPath(); ctx.arc(350, 250, 100, 0, Math.PI * 2); ctx.fill(); ctx.restore(); }); // === Mask button – destination-in (keep only inside shape) === maskBtn.addEventListener('click', () => { ctx.save(); ctx.globalCompositeOperation = 'destination-in'; // Draw white star → only star area remains visible ctx.beginPath(); ctx.moveTo(350, 100); for (let i = 0; i < 5; i++) { ctx.lineTo(350 + 120 * Math.cos((i * 2 - 0.5) * Math.PI / 5), 250 + 120 * Math.sin((i * 2 - 0.5) * Math.PI / 5)); ctx.lineTo(350 + 60 * Math.cos((i * 2 + 0.5) * Math.PI / 5), 250 + 60 * Math.sin((i * 2 + 0.5) * Math.PI / 5)); } ctx.closePath(); ctx.fillStyle = 'white'; ctx.fill(); ctx.restore(); }); // Reset button resetBtn.addEventListener('click', drawBaseScene); </script> </body> </html> |
What happens when you click buttons:
- Erase → black circle cuts a hole in the yellow circle & text (destination-out)
- Mask → white star keeps only the star-shaped area visible (destination-in)
- Reset → brings back the original full scene
4. All Important globalCompositeOperation Modes (With Real Use Cases)
| Mode | What happens visually | Most common real use case | Example |
|---|---|---|---|
| source-over (default) | New on top of old | Normal drawing | — |
| destination-out | Old erased where new is drawn | Erase / cut holes with shape | Eraser tool, punch-out mask |
| destination-in | Only old kept where new is drawn | Mask / keep inside shape | Text reveal, shape mask |
| source-in | New only where old exists | Fill shape with pattern/image inside old content | Fill inside circle |
| source-atop | New only on top of old (old unchanged) | Tint / color overlay only where content is | Color overlay on photo |
| lighter / screen | Add / lighten colors | Glows, light effects, explosions | Neon / light bloom |
| multiply | Darken / multiply | Shadows, dark blend, burn effect | Shadow overlay |
| xor | Only where one layer exists | Special effects, XOR masks | Rare, creative |
5. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Alwayssave() before changing globalCompositeOperation and restore() after — otherwise all later drawings use the same mode
- destination-out is the most used erase mode — like a cookie-cutter eraser
- destination-in is the masking mode — very powerful for reveals
- Common mistake #1: Forget save()/restore() → all future drawings are composited wrongly
- Common mistake #2: Draw clip shape after setting composite mode → it gets affected too
- Pro tip: Combine compositing + clipping + gradients + shadows → modern glassmorphism, neon, overlay effects
Understood Canvas Compositing fully now? This is one of the most powerful hidden features in Canvas — it unlocks erase tools, masks, glows, light effects, image blending, creative masks, and almost every polished visual effect you see in games, editors, UI components.
Tell me what you want next — we can build on this:
- Full eraser / paint app (destination-out on mouse drag)?
- Text reveal animation with destination-in?
- Glow / neon text with lighter / screen mode?
- Glassmorphism card with multiply shadow + source-atop overlay?
- Or 15-question compositing quiz?
Just say — we keep going step by step together! 🚀
