Canvas & WebGL
Learning by doing, one experiment at a time.
What is the Canvas API?
The basics — what it is, when it was introduced, and what you can do with it.
Drawing Shapes
Rectangles, paths, arcs, and circles — the building blocks of everything you'll draw.
Colours & Styles
Fill colours, gradients, transparency, and line styles — making your shapes look good.
Transformations
Translate, rotate, and scale — moving the coordinate system instead of calculating every position.
Animation
The animation loop — requestAnimationFrame, time-based motion, and bringing your drawings to life.
Interaction
Mouse events, hit detection, hover effects, and dragging — making your canvas respond to the user.
Images & Pixels
Loading images, reading pixel data, and manipulating colours at the lowest level.
Intro to WebGL
The GPU pipeline — shaders, buffers, and your first triangle rendered with raw WebGL.
Intro to Three.js
The library that tames WebGL — scenes, cameras, geometry, materials, and lights in a few lines of code.
Creative Coding
Audio-reactive 3D visuals — combining Three.js with the Web Audio API to make art that responds to your voice.