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:

 

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

Returns a 'data:' string representation of the canvas. type can be 'image/png' or 'image/jpeg'. When using 'image/jgeg', you may pass an additional value between 0.0 and 1.0 to change the compression rate. 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: