Section 25.6. Canvas: an HTML element for scripted drawing

25.6. Canvas: an HTML element for scripted drawing

Firefox 1.5, Safari 1.3, Opera 9: Node Element HTMLElement Canvas

25.6.1. Properties

String height

The height of the canvas. As with an image, this may be specified as an integer pixel value or percentage of the window height. When this value is changed, any drawing that has been done in the canvas is erased. The default value is 300.

String width

The width of the canvas. As with an image, this may be specified as an integer pixel value or percentage of the window width. When this value is changed, any drawing that has been done in the canvas is erased. The default value is 300.

25.6.2. Methods

getContext( )

Returns a CanvasRenderingContext2D object with which to draw on the canvas. You must pass the string "2d" to this method to specify that you want to do two-dimensional drawing.

25.6.3. 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, but most of its functionality is available via the CanvasRenderingContext2D object. This is obtained by calling the getContext( ) method of the Canvas object and passing the literal string "2d" as the sole argument.

The <canvas> tag was introduced in Safari 1.3 and, at this writing, is also supported in Firefox 1.5 and Opera 9. The <canvas> tag, and its API, can be simulated in IE with the ExplorerCanvas open source project at http://excanvas.sourceforge.net/.

25.6.4. See Also

CanvasRenderingContext2D; Chapter 22