Canvas Pocket Reference

Chapter 1. Canvas Tutorial

This book explains how to draw graphics in web pages using JavaScript and the HTML <canvas> tag. The ability to dynamically generate sophisticated graphics in the web browser instead of downloading them from a server is revolutionary:

• The code used to produce graphics on the client side is typically much smaller than the images themselves, creating a substantial bandwidth savings.

• Offloading drawing tasks from the server to the client reduces the load on the server, potentially saving on hardware costs.

• Generating graphics on the client is consistent with the Ajax application architecture in which servers provide data and clients manage the presentation of that data.

• The client can rapidly and dynamically redraw graphics, enabling graphically intense applications (such as games and simulations) that are simply not feasible when each frame has to be downloaded from a server.

• Writing graphics programs is fun, and the <canvas> tag gives web developers some relief from the drudgery of the DOM!

The <canvas> tag has no appearance of its own but creates a drawing surface within the document and exposes a powerful drawing API to client-side JavaScript. The <canvas> tag is standardized by HTML5 but has been around for longer than that. It was introduced by Apple in Safari 1.3, and has been supported by Firefox since version 1.5 and Opera since version 9. It is also supported in all versions of Chrome. The <canvas> tag is not supported by IE before IE 9, but can be reasonably ...