Code

Canvas

Basic Shapes

fillRect, strokeRect, arc, closePath and roundRect — the core drawing primitives.

Colors & Gradients

Linear, radial and conic gradients, drop shadows, and globalAlpha transparency.

Text Rendering

fillText, strokeText, font styles, textAlign, textBaseline, and measureText.

Transformations

translate, rotate, scale, setTransform and the save/restore state stack.

Bezier Paths

Quadratic and cubic Bézier curves, Path2D reuse, star polygons, and arcTo.

Animation Loop

requestAnimationFrame-driven bouncing balls with gravity, friction, and motion-blur trails.

Mouse Drawing

Interactive paint application — smooth draw/erase with brush colour and size controls.

Compositing Modes

All 16 globalCompositeOperation modes — from source-over to multiply and xor.

Pixel Manipulation

ImageData filters — grayscale, invert, sepia, brightness boost, and pixelate.

Particle System

Physics-based particles with buoyancy, turbulence, colour lifecycle, and additive blending.

Fractal Tree

Animated recursive fractal tree — dynamic branching angle with brown-to-green colour transition.

Conway's Game of Life

Cellular automaton on a toroidal grid — pause, resume, and randomise the population.

Flow Field

1,200 particles following a dynamic vector field built from layered sine/cosine noise.

Mandelbrot Set

Mandelbrot set with smooth colouring, auto-zooming into the Seahorse Valley.

Generative Art

Algorithmic tile grid — noise-driven hue and rotation with layered concentric ring overlays.

Compositing Modes

IntermediateglobalCompositeOperation — all 16 blend and compositing modes. Blue square = destination; orange circle = source. MDN Reference

const ops: GlobalCompositeOperation[] = [
  'source-over', 'source-in',
  'source-out',  'source-atop',
  'destination-over', 'destination-in',
  'destination-out',  'destination-atop',
  'lighter', 'copy', 'xor',
  'multiply', 'screen', 'overlay',
  'darken',  'lighten',
];

ops.forEach((op, i) => {
  ctx.save();

  // Clip each cell so operations don't bleed
  ctx.beginPath();
  ctx.rect(ox, oy, cellW, cellH);
  ctx.clip();

  // Draw destination (blue square)
  ctx.fillStyle = '#3b82f6';
  ctx.fillRect(ox + 5, oy + 5, 60, 60);

  // Apply composite op BEFORE drawing source
  ctx.globalCompositeOperation = op;

  // Draw source (orange circle)
  ctx.fillStyle = '#f97316';
  ctx.beginPath();
  ctx.arc(ox + 55, oy + 45, 32, 0, Math.PI * 2);
  ctx.fill();

  ctx.restore(); // also resets compositeOperation
});

// Common use-cases:
// 'multiply'  — darkens overlaps (like Photoshop Multiply)
// 'screen'    — brightens overlaps
// 'xor'       — cuts out intersection
// 'destination-out' — erase with a shape

Key Concepts

Set ctx.globalCompositeOperationbefore drawing the source shape
ctx.save() / ctx.restore() resets the composite operation per cell
source-over is the default — new drawing paints on top
destination-out — use a shape as an eraser mask
multiply / screen / overlay — CSS-equivalent layer blend modes
lighter — additive blend (useful for glowing particles)