Supercharged JavaScript Graphics

Chapter 6. HTML5 Canvas

One of HTML5’s most tantalizing features is the Canvas element. Taking the form of a simple rectangular area within the page (similar to a div), Canvas allows you to draw sophisticated graphics inside it using JavaScript. It was initially developed by Apple for rendering user interface widgets and other imagery within the Mac operating system and by the Safari browser. Apple released its patents relating to Canvas under the World Wide Web Consortium’s (W3C) royalty-free licensing terms. This means that Apple provides royalty-free licensing for Canvas when it appears within the context of W3C HTML recommendations.

This chapter covers the basics of Canvas and uses it to implement various practical applications. A fully exhaustive coverage of the tag is beyond the scope of this book, but if this chapter whets your appetite, you may wish to consider the following titles to increase your knowledge:

• Canvas Pocket Reference by David Flanagan (O’Reilly; http://oreilly.com/catalog/0636920016045)

• HTML5 Canvas by Steve Fulton and Jeff Fulton (O’Reilly; http://oreilly.com/catalog/0636920013327)

Canvas is a low-level, immediate mode application programming interface (API):

Low level

Canvas provides a fast but fairly basic feature set. For instance, rectangles are the only native primitive shape. However, you can augment the feature set via JavaScript programming.

Immediate mode

Canvas drawing instructions are executed the moment they are called; unlike SVG, Canvas has no intermediate ...