JavaScripture
Contribute via GitHub Feedback

JavaScript HTMLCanvasElement : HTMLElement

HTMLCanvasElement is an element that allows programmatically creating images in the browser. It corresponds to the <canvas> tag.

Instance Properties

height : Number

The height of this in pixels. Setting height clears the buffer.

Example:

Run

Results:

 

width : Number

The width of this in pixels. Setting width clears the buffer.

Example:

Run

Results:

 

Instance Methods

getContext(contextType : String, [contextAttributes : Object]) : CanvasRenderingContext

Returns a context that can be used to draw into the canvas. contextType can be either '2d' to retrieve a CanvasRenderingContext2D or 'webgl' to retrieve a WebGLRenderingContext. When specifying 'webgl', you can configure how the context is initialized by passing a WebGLContextAttributes as the second parameter.

Example:

Run

Results:

 

toBlob(callback : Function, [type = 'image/png' : String, [quality : Number]]) : undefined
callback(blob : Blob) : undefined

Calls callback with a blob representation of the canvas. type can be 'image/png' or 'image/jpeg'. When using 'image/jgeg', you may provide the quality parameter (0.0 to 1.0) to change the quality of the saved file and consequently the size of the file. Note, if you are using WebGL, you must paint to the canvas immediately before calling toBlob, or set preserveDrawingBuffer to true to keep the buffer available after the browser has displayed the contents.

Example:

Run

Results:

 

toDataURL([type = 'image/png' : String, [quality : Number]]) : String

Returns a 'data:' string representation of the canvas. type can be 'image/png' or 'image/jpeg'. When using 'image/jgeg', you may provide the quality parameter (0.0 to 1.0) to change the quality of the saved file and consequently the size of the file. Note, if you are using WebGL, you must paint to the canvas immediately before calling toDataURL, or set preserveDrawingBuffer to true to keep the buffer available after the browser has displayed the contents.

Example:

Run

Results: