Name
Canvas — an HTML element for scripted drawing
Properties
String width, height
These properties mirror the
width
andheight
attributes of the<canvas>
tag and specify the dimensions of the canvas coordinate space. The defaults are 300 forwidth
and 150 forheight
.If the size of the canvas element is not otherwise specified in a stylesheet or with the inline
style
attribute, then thesewidth
andheight
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 ...
Get Canvas Pocket Reference now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.