Learn HTML Canvas from scratch. From understanding the fundamentals to building a particle system.
A from-first-principles mental model: renderer architecture, the event loop, tasks vs microtasks, the input pipeline, what isInputPending actually queries, long tasks and Interaction to Next Paint (INP), and scheduler.yield() mechanics, culminating in why the common "yield only on input pending" pattern is broken and what the correct pattern looks like.
Build the macOS Drift screensaver from scratch, one concept at a time, ending in a real-time fluid simulation rendered as a grid of glowing line segments.
Lerps, Bezier equations, Bernstein polynomials, and why every curve is just nested interpolation.
Everything you need to understand about Canvas before writing your first line of code.
Drawing your first shapes with fillRect, strokeRect, and clearRect.
Draw any shape you can imagine using paths, arcs, and curves.
A deep dive into color theory, gradients, patterns, transparency, compositing, line styles, and shadows on the Canvas.
Everything about rendering text, loading and drawing images, sprite sheets, pixel manipulation, and saving your canvas.
Translate, rotate, scale, and the critical save/restore state stack.
Game loops, requestAnimationFrame, smooth motion, physics, easing, and practical animation techniques.
Mouse, touch, and keyboard input: coordinate mapping, hit detection, dragging, and building interactive tools.
Capstone: build a complete particle system combining everything you've learned.