Examples

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
  • 03-05a First try.
  • 03-05b Second try.

Lesson 5: Simple Canvas Animations

• 05-01 Animated circle
  • 05-01a First try.
  • 05-01b Second try.
  • 05-01c Third try.
  • 05-01d Fourth try.
• 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
  • 07-01a Non-object version.
  • 07-01b Ball object version.

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

• 10-01 Simple image display.
• 10-02 Scaled image display.
• 10-03 Partial image display.
• 10-04 Pattern.

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.

Lesson 15: Transforms and Shadows

• 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.