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.

Text Rendering

Beginner Drawing, styling and measuring text — fillText, strokeText, fonts, alignment, baseline, shadows, and measureText. MDN Reference

// Basic fillText
ctx.font = '32px sans-serif';
ctx.fillStyle = '#1e293b';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText('fillText — basic', 20, 10);

// strokeText
ctx.font = 'bold 36px Georgia, serif';
ctx.strokeStyle = '#4f46e5';
ctx.lineWidth = 1.5;
ctx.strokeText('strokeText', 20, 55);

// Gradient fill text
const grad = ctx.createLinearGradient(0, 0, W, 0);
grad.addColorStop(0, '#ec4899');
grad.addColorStop(1, '#f59e0b');
ctx.font = 'bold 40px Arial, sans-serif';
ctx.fillStyle = grad;
ctx.textAlign = 'center';
ctx.fillText('Gradient Text', W / 2, 105);

// textAlign
ctx.textAlign = 'left';   ctx.fillText('left',   W/2, 160);
ctx.textAlign = 'center'; ctx.fillText('center', W/2, 184);
ctx.textAlign = 'right';  ctx.fillText('right',  W/2, 208);

// textBaseline (all drawn at same y)
const baselines = ['top','middle','alphabetic','bottom'];
ctx.textBaseline = bl;
ctx.fillText(bl, x, y);

// measureText
const metrics = ctx.measureText('Hello');
console.log(metrics.width); // pixel width

// Shadow on text
ctx.shadowColor   = 'rgba(99,102,241,0.5)';
ctx.shadowBlur    = 10;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText('Text with Shadow', 20, 375);
ctx.shadowColor = 'transparent';

Key APIs

ctx.font — CSS font shorthand: 'bold 24px Arial'
ctx.textAlign — left | center | right | start | end
ctx.textBaseline — top | middle | alphabetic | bottom | hanging
ctx.fillText(text, x, y, maxWidth?) — filled text
ctx.strokeText(text, x, y, maxWidth?) — outlined text
ctx.measureText(text) — returns TextMetrics with width, ascent, descent