Client-side Graphics with HTML5 Canvases

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.

2D graphics in HTML5 involve more than img tags. In fact, you'll be connecting points, integrating PhotoShop-like instructions like setting a brush width into your JavaScript, and doing it all with resolution and frame rates in mind. If this sounds like a full-blown graphics program, then you've got the right idea. Don't believe that the web can't be a place for showing off your graphical chops anymore.

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.