1. Introduction
  2. Draw a Circle
  3. Add Some Color
  4. Action
  5. Library: an Interlude
  6. Bounce
  7. Add a Paddle
  8. The Keyboard
  9. The Mouse
  10. The Bricks
  11. Finishing Touches
  12. Coda

Coda

That's it, Thanks for reading this far! The code presented here is cribbed mostly from a presentation I gave to Refresh Baltimore in August, 2008. Some resources you may find helpful if you study canvas more:
  • Mozilla's canvas tutorial is excellent, and much more comprehensive than this one.
  • The Spec. Since it's currently in development, these features may or may not be available in current browsers.
  • Firebug is an essential tool for any javascript developer.

Innumerable thanks to codemirror for the awesome text editor in use all over this tutorial, and to jQuery and jQuery UI for making my life much easier.

You can find the code used to generate this tutorial (using the excellent mako template library) on github.

Feel free to drop me a line if you have any comments or questions, or visit my blog.

prev