Canvas Lab

Every lesson has interactive code editors; you can modify examples and see results instantly in your browser. You can draw shapes, animate objects, handle mouse input, and build a particle system from scratch.

Prerequisites: JavaScript (variables, functions, loops, arrays).

Estimated time: Learning is easy, good things take time. On rough estimates, each lesson takes 15 to 30 minutes.

• 00
  Foundation

  What Canvas is, how it works, the coordinate system, and the ctx object

  getContext, coordinate system, immediate mode
• 01
  Basics

  Drawing rectangles, setting colors, and understanding draw order

  fillRect, strokeRect, clearRect, fillStyle
• 02
  Paths & Shapes

  Custom shapes with paths, lines, arcs, curves

  beginPath, moveTo, lineTo, arc, bezierCurveTo
• 03
  Colors & Styles

  Fills, strokes, gradients, transparency

  fillStyle, strokeStyle, createLinearGradient, globalAlpha
• 04
  Text & Images

  Rendering text and drawing images on canvas

  fillText, strokeText, font, drawImage
• 05
  Transforms

  Translate, rotate, scale, and the state stack

  translate, rotate, scale, save, restore
• 06
  Animation

  Game loops, requestAnimationFrame, smooth motion

  requestAnimationFrame, clearRect, deltaTime
• 07
  Interaction

  Mouse and touch input, coordinate mapping, hit detection

  mousemove, click, getBoundingClientRect
• 08
  Particle System

  Capstone project combining everything

  All of the above
• 09
  Final Boss: The Drift

  Rebuild the macOS Drift screensaver from scratch with a real fluid simulation

  Stable Fluids, advection, projection, bilinear sampling
• A
  Appendix: The Math Behind Curves

  Lerps, Bezier equations, Bernstein polynomials, and why every curve is just nested interpolation

  lerp, quadratic bezier, cubic bezier, De Casteljau