See also the Gallery.
Lesson 2: JavaScript Fundamentals
- HTML5 boilerplate ← This is an empty page; use your browser’s “view source” (usually Control-U) and “go back” commands if needed (but it should open in a new window or tab)
Lesson 3: Introduction to the Canvas
These examples should show the canvas and the complete HTML source code (script, tags, and all).
- 03-01 Two overlapping rectangles.
- 03-02 Stroked and filled text.
- 03-03 Two overlapping rectangles, using a path.
- 03-04 A semicircle over two horizontal lines.
- 03-05 Blue and yellow rectangles
Lesson 5: Simple Canvas Animations
- 05-01 Animated circle
- 05-02 Orbiting rotating square.
Lesson 6: Colors and Gradients
- 06-01 Overlapping rectangles with transparency.
- 06-02 Linear gradients.
- 06-03 Radial gradients.
Lesson 7: JavaScript Objects
- 07-01 Animated cannon ball
Lesson 8: JavaScript Arrays
- 08-01 Animated cannon ball objects in an array
Lesson 9: Controls and Events
- 09-01 Mouse chaser.
- 09-02 Orbiting square with controls.
Lesson 10: Images and Patterns
Lesson 12: Drawing Text
- 12-01 Text direction, alignment, and baseline.
- 12-02 Using text metrics to position an image.
Lesson 14: More about Lines and Curves
- 14-01 Line width.
- 14-02 Line caps and joins.
- 14-03 Line dashing (not implemented).
- 14-04 Quadratic Bézier curves.
- 14-05 Cubic Bézier curves.
- 15-01 An arrowhead with explicit coordinates.
- 15-02 An arrowhead at (0, 0) with translation.
- 15-03 Scaling and rotating the arrowhead.
- 15-04 Scaling and rotating the arrowhead about its center.
- 15-05 Arrowhead with shadow.
- 15-06 Transforming an image.
- 15-07 Transforming text.
Lesson 16: Audio and Video
- 16-01 Basic audio and video elements.
- 16-02 Audio scripting.
Lesson 17: Introduction to SVG
- 17-01 Basic lines, curves, and shapes.
- 17-02 Various fill and stroke styles.
- 17-03 Text and images.
- 17-04 Using and transforming defined groups.
Lesson 18: Fancier SVG
- 18-01 Some rectangles with a linear gradient.
- 18-02 Gradient transformations.
- 18-03 Radial gradients.
- 18-04 Two drawings with patterns.
- 18-05 Using a clipping path and a mask.
- 18-06 Filter (Gaussian blur).
Lesson 19: Declarative Animation in SVG
- 19-01 Basic SMIL animation of rectangles.
- 19-02 Key-frame animation.
- 19-03 Multiple animated attributes.
- 19-04 Following a path.
- 19-05 Animated transformations of an arrowhead.
- 19-06 Starting animations.
- 19-07 Combining events and times.
- 19-08 Discrete changes.
Lesson 20: Dynamic SVG
- 20-01 Random gradients.
- 20-02 A particle system.
- 20-03 Modify the particle system to start on a mouse click.
- 20-04 Multiple animations with pause and restart controls in HTML.