Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


The Web used to be a place for text. Then images came alone. But now, with HTML5, full-blown 2D and 3D graphics are available. In this Breakdown, you'll not only learn about the new HTML5 canvas tag, but draw on that canvas... with some style. By the time you're done, you'll have a working version of Asteroids, all running in a simple web browser.

The experts in the O'Reilly Breakdown live video series not only break down the concepts of difficult and complex subjects, they also demonstrate practical implementation and use. Each episode features an experienced programmer, developer, or software designer working on real-world challenges, ranging from iPad user interface design and multi-tasking on Android phones to caching in cloud-based applications.

Subscriber Reviews

Average Rating: 4 out of 5 rating Based on 6 Ratings

"content: 5; execution on safari: 3" - by gluis on 13-FEB-2011
Reviewer Rating: 1 star rating2 star rating3 star rating4 star rating5 star rating
First off, the video was helpful, enjoyable and educational. It was a great way to get a quick idea about interactivity using canvas and javascript in html5.

There are two major drawbacks, which have less to do w/ the content and more to do w/ how safari has packaged it:

1. the exercise files were not actually available in the extras section, or anywhere for download (as stated in the video), so getting the two classes david pastes in required stopping the video and trying to read a tiny still frame to type it out. (not impossible; it was just a bit annoying.)

2. the audio on 2 of the 5 videos stops at around 21:00, although the video continues. the audio on the final session is seriously out of sync (by about 1/2 minute -- i'm guessing).

in spite of those, the idea of an asteroids game was perfect and appealed to why i became a programmer as a kid! (to make games)

Report as Inappropriate

Table of Contents



HTML Pages Get Animated



Drawing Inside a Canvas



Creating an Animation Loop



Interacting with the Keyboard



Painting Images Inside the Canvas



Considering the User




The publisher has provided additional content related to this title.


Visit the catalog page for Client-side Graphics with HTML5 Canvases

  • Catalog Page

Visit the errata page for Client-side Graphics with HTML5 Canvases

  • Errata