JavaScripture
Contribute via GitHub Feedback

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

captureStream([requestedFrameRate : Number]) : MediaStream

Creates a video stream for the canvas. requestedFrameRate can be used to update the video at a slower frequency than the canvas. If set to 0, use CanvasCaptureMediaStreamTrack.requestFrame to update the video.

Example:

Run

Results:

 

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

Returns a context that can be used to draw into the canvas. contextType can be '2d' to retrieve a CanvasRenderingContext2D 'bitmaprenderer' to retrieve an ImageBitmapRenderingContext or 'webgl' to retrieve a WebGLRenderingContext. <br> 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: