Canvas Pocket Reference

Name

Canvas — an HTML element for scripted drawing

Properties

String width, height

These properties mirror the width and height attributes of the <canvas> tag and specify the dimensions of the canvas coordinate space. The defaults are 300 for width and 150 for height.

If the size of the canvas element is not otherwise specified in a stylesheet or with the inline style attribute, then these width and height properties also specify the onscreen dimensions of the canvas element.

Setting either of these properties (even setting one to its current value) clears the canvas to transparent black and resets all of its graphics attributes to their default values.

Methods

getContext()

Returns a context object with which you can draw on the canvas. Pass the string “2d” to obtain a CanvasRenderingContext2D that allows two-dimensional drawing.

Pass the string “webgl” to obtain a WebGLRenderingContext object for 3D rendering in browsers that support it. WebGLRenderingContext is not yet standardized and is not documented in this book.

toDataURL()

Returns a data: URL representing the image on the canvas.

Description

The Canvas object represents an HTML canvas element. It has no behavior of its own but defines an API that supports scripted client-side drawing operations. You may specify the width and height directly on this object, and can extract an image from the canvas with toDataURL(), but the actual drawing API is implemented by a separate “context” object returned by the getContext() method. See CRC.

The ...