JavaScript: The Definitive Guide, 6th Edition

Name

Canvas — an HTML element for scripted drawing

Inherits from

Node, Element

Synopsis

The Canvas object represents an HTML canvas element. It has no behavior of its own, but it defines an API that supports scripted client-side drawing operations. You can specify the width and height directly on this object, and you 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 CanvasRenderingContext2D.

Properties

unsigned long heightunsigned long width

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, these width and height properties also specify the on-screen dimensions of the canvas element.

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

Methods

object getContext(string contextId, [any args...])

This method returns an object with which you can draw into the Canvas element. When you pass the string “2d”, it will return a CanvasRenderingContext2D object for 2D drawing. No additional args are required in this case.

There is only one CanvasRenderingContext2D object per canvas element, so repeated calls to getContext("2d") ...