Canvas Composition

Beginner
⏱️ 8 min read
📚 Updated: Aug 2025
🎯 2 Examples
Layers & Blending
Canvas composition tutorial illustration showing layered shapes and blending

What You’ll Learn

Canvas is a single pixel surface, but you can build rich visuals by composing drawings in layers. Composition is mainly about drawing order, transparency, and blending.

This page covers the basics of composition and introduces globalCompositeOperation (the key to masking and blend modes).

⚡ Quick Reference

Order Draw last = on top

Canvas paints over existing pixels

Opacity globalAlpha

0 (transparent) → 1 (opaque)

Blending globalCompositeOperation

source-over, multiply, screen, destination-out…

Key properties
ctx.globalAlpha = 0.7;
ctx.globalCompositeOperation = 'source-over';

👀 Live Preview — Blend Modes

Change the blend mode and alpha to see how shapes combine on a single canvas.

0.85

Tip: destination-out works like an eraser. It removes pixels from what you already drew.

1

Drawing Order (Layering)

Canvas draws in order. The circle appears on top because it is drawn after the rectangle.

script.js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Draw a blue rectangle first
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 80);

// Draw a red circle second (on top)
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(150, 100, 40, 0, 2 * Math.PI);
ctx.fill();
2

Transparency with globalAlpha

Use globalAlpha to make drawings semi-transparent so layers can show through.

script.js
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Base layer
ctx.globalAlpha = 1;
ctx.fillStyle = '#2563eb';
ctx.fillRect(50, 50, 140, 100);

// Top layer (semi-transparent)
ctx.globalAlpha = 0.6;
ctx.fillStyle = '#f97316';
ctx.beginPath();
ctx.arc(160, 120, 55, 0, Math.PI * 2);
ctx.fill();

// Reset alpha for future drawings
ctx.globalAlpha = 1;

💡 Best Practices

Do

  • Use ctx.save() / ctx.restore() to scope composition changes
  • Reset globalAlpha and globalCompositeOperation after special effects
  • Draw in layers: background → shapes → text → highlights
  • Use offscreen canvases for expensive compositing if needed
  • Test blend modes across browsers when you rely on them

Don’t

  • Forget that these properties persist (they affect later drawings)
  • Stack many blend operations on large canvases without profiling
  • Use destination-out without understanding it erases existing pixels
  • Assume drawing order doesn’t matter (it always does)
  • Ignore accessibility when canvas conveys important information

❓ Frequently Asked Questions

Canvas composition is how multiple drawings combine on one canvas. It includes drawing order, transparency (globalAlpha), and blending (globalCompositeOperation).
It sets the opacity for all drawing operations that follow (0 is transparent, 1 is opaque).
It controls how new pixels blend with existing pixels. It’s used for blend modes and masking effects (like erasing with destination-out).
Because they persist until changed. Use ctx.save()/ctx.restore() or reset them after a special effect.

Draw Arcs Next

Learn how to draw circles and arcs with ctx.arc() and combine them into shapes.

Canvas Draw Arc →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

4 people found this page helpful

Canvas Introduction Canvas Draw Arc