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.

Colors & Gradients

Beginner Solid fills, linear gradients, radial gradients, conic gradients, drop shadows, and globalAlpha. MDN Reference

// Linear gradient
const linGrad = ctx.createLinearGradient(0, 0, 460, 0);
linGrad.addColorStop(0,   '#6366f1');
linGrad.addColorStop(0.5, '#ec4899');
linGrad.addColorStop(1,   '#f59e0b');
ctx.fillStyle = linGrad;
ctx.fillRect(10, 10, 440, 70);

// Radial gradient
const radGrad = ctx.createRadialGradient(
  175, 250, 10,   // inner circle
  175, 250, 80    // outer circle
);
radGrad.addColorStop(0,   '#fef08a');
radGrad.addColorStop(0.5, '#f97316');
radGrad.addColorStop(1,   'rgba(239,68,68,0)');
ctx.fillStyle = radGrad;
ctx.beginPath();
ctx.arc(175, 250, 80, 0, Math.PI * 2);
ctx.fill();

// Conic gradient
const conicGrad = ctx.createConicGradient(0, 350, 250);
conicGrad.addColorStop(0,    '#a855f7');
conicGrad.addColorStop(0.25, '#3b82f6');
conicGrad.addColorStop(0.5,  '#22c55e');
conicGrad.addColorStop(0.75, '#facc15');
conicGrad.addColorStop(1,    '#a855f7');
ctx.fillStyle = conicGrad;
ctx.beginPath();
ctx.arc(350, 250, 80, 0, Math.PI * 2);
ctx.fill();

// Drop shadow
ctx.shadowColor   = 'rgba(0,0,0,0.5)';
ctx.shadowBlur    = 15;
ctx.shadowOffsetX = 6;
ctx.shadowOffsetY = 6;
ctx.fillStyle = '#6366f1';
ctx.fillRect(10, 175, 120, 60);
ctx.shadowColor = 'transparent'; // always reset!

// Overlapping semi-transparent circles
ctx.globalAlpha = 0.6;
for (const [x, y, c] of circles) {
  ctx.beginPath();
  ctx.arc(x, y, 45, 0, Math.PI * 2);
  ctx.fillStyle = c;
  ctx.fill();
}
ctx.globalAlpha = 1;

Key APIs

ctx.createLinearGradient(x0,y0,x1,y1) — gradient along a line
ctx.createRadialGradient(x0,y0,r0,x1,y1,r1) — between two circles
ctx.createConicGradient(angle, cx, cy) — sweeps around a point
gradient.addColorStop(offset, color) — 0 = start, 1 = end
ctx.shadowColor / shadowBlur / shadowOffsetX / Y — drop shadow
ctx.globalAlpha — 0 (transparent) → 1 (opaque) for all drawing