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.

Basic Shapes

Beginner Draw rectangles, circles, lines, arcs, and polygons using the 2D rendering context. MDN Reference

const ctx = canvas.getContext('2d')!;

// Filled rectangle
ctx.fillStyle = '#4f46e5';
ctx.fillRect(20, 20, 120, 80);

// Stroked rectangle
ctx.strokeStyle = '#e11d48';
ctx.lineWidth = 3;
ctx.strokeRect(160, 20, 120, 80);

// Clear a region
ctx.clearRect(50, 40, 60, 40);

// Line
ctx.beginPath();
ctx.moveTo(20, 140);
ctx.lineTo(280, 140);
ctx.strokeStyle = '#16a34a';
ctx.lineWidth = 4;
ctx.stroke();

// Full circle
ctx.beginPath();
ctx.arc(80, 220, 50, 0, Math.PI * 2);
ctx.fillStyle = '#f59e0b';
ctx.fill();

// Semi-circle
ctx.beginPath();
ctx.arc(220, 220, 50, 0, Math.PI);
ctx.strokeStyle = '#0ea5e9';
ctx.lineWidth = 3;
ctx.stroke();

// Triangle
ctx.beginPath();
ctx.moveTo(320, 170);
ctx.lineTo(420, 270);
ctx.lineTo(220, 270);
ctx.closePath();
ctx.fillStyle = '#7c3aed';
ctx.fill();

// Rounded rectangle
ctx.beginPath();
ctx.roundRect(320, 20, 120, 80, 16);
ctx.fillStyle = '#db2777';
ctx.fill();

Key APIs

ctx.fillRect(x, y, w, h) — filled rectangle shortcut
ctx.strokeRect(x, y, w, h) — outlined rectangle shortcut
ctx.clearRect(x, y, w, h) — erase pixels back to transparent
ctx.arc(x, y, r, startAngle, endAngle) — full circles and arcs
ctx.moveTo / lineTo / closePath — arbitrary polygon paths
ctx.roundRect(x, y, w, h, radii) — CSS-style rounded corners