David Flanagan - Canvas Pocket Reference: Scripted Graphics for HTML5

This book documents the JavaScript API for drawing graphics in an HTML

tag. It assumes that you know the JavaScript programming language and have at least basic familiarity with the use of JavaScript in web pages. is a reference to each of the Canvas-related classes, methods, and properties.

This book is an excerpt from the much longer book JavaScript: The Definitive Guide ; my publisher and I felt that the

tag is such an exciting feature of HTML5 that it deserves a timely and concise book of its own. Because the Canvas API is relatively small, this short book can document it definitively .

Thanks to Raffaele Cecco for a careful review of the book and its code examples. Thanks also to my editor, Mike Loukides, for his enthusiasm for this project and to editor Simon St. Laurent for his work converting the material from Definitive Guide to Pocket Reference format.

The examples in this book can be downloaded from the books web page, which will also include errata if any errors are discovered after publication:

http://oreilly.com/catalog/0636920016045/

In general, you may use the examples in this book in your programs and documentation. You do not need to contact us for permission unless youre reproducing a significant portion of the code. We appreciate, but do not require, an attribution like this: From Canvas Pocket Reference by David Flanagan ( OReilly ). Copyright 2011 David Flanagan , 978-1-449-39680-0. If you feel your use of code examples falls outside fair use or the permission given here, feel free to contact us at .

To comment or ask technical questions about this book, send email to:

This book is also available from the Safari Books Online service. For full digital access to this book and others on similar topics from OReilly and other publishers, sign up at http://my.safaribooksonline.com.

Most of the Canvas drawing API is defined not on the

element itself but instead on a drawing context object obtained with the getContext() method of the canvas. Call getContext() with the argument 2d to obtain a Canvas Rendering Context2D object that you can use to draw two- dimensional graphics into the canvas. It is important to understand that the canvas element and its context object are two very different objects. Because it has such a long class name, I do not often refer to the CanvasRenderingContext2D object by name and instead simply call it the context object. Similarly, when I write about the Canvas API I usually mean the methods of the CanvasRenderingContext2D object. Also, since the long class name CanvasRenderingContext2D does not fit well on these narrow pages, the reference section that follows this tutorial chapter abbreviates it as CRC.

3D Graphics in a Canvas

At the time of this writing, browser vendors are starting to implement a 3D graphics API for the

tag. The API is known as WebGL, and is a JavaScript binding to the OpenGL standard API. To obtain a context object for 3D graphics, pass the string webgl to the getContext() method of the canvas. WebGL is a large, complicated, and low-level API that is not documented in this book: web developers are more likely to use utility libraries built on top of WebGL than to use the WebGL API directly.