The HTMLCanvasElement
interface provides properties and methods for manipulating the layout and presentation of <canvas>
elements. The HTMLCanvasElement
interface also inherits the properties and methods of the HTMLElement
interface.
Properties
Inherits properties from its parent, HTMLElement
.
HTMLCanvasElement.height
- Is a positive
integer
reflecting theheight
HTML attribute of the<canvas>
element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of150
is used. HTMLCanvasElement.width
- Is a positive
integer
reflecting thewidth
HTML attribute of the<canvas>
element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of300
is used. HTMLCanvasElement.mozOpaque
- Is a
Boolean
reflecting themoz-opaque
HTML attribute of the<canvas>
element. It lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized. This is only supported in Mozilla-based browsers; use the standardizedcanvas.getContext('2d', { alpha: false })
instead. HTMLCanvasElement.mozPrintCallback
- Is a
function
that is Initially null. Web content can set this to a JavaScript function that will be called when the canvas is to be redrawn while the page is being printed. When called, the callback is passed a "printState" object that implements the MozCanvasPrintState interface. The callback can get the context to draw to from the printState object and must then call done() on it when finished. The purpose ofmozPrintCallback
is to obtain a higher resolution rendering of the canvas at the resolution of the printer being used. See this blog post.
Methods
Inherits methods from its parent, HTMLElement
.
HTMLCanvasElement.captureStream()
- Returns a
CanvasCaptureMediaStream
that is a real-time video capture of the surface of the canvas. HTMLCanvasElement.getContext()
- Returns a drawing context on the canvas, or null if the context ID is not supported. A drawing context lets you draw on the canvas. Calling getContext with
"2d"
returns aCanvasRenderingContext2D
object, whereas calling it with"webgl"
(or"experimental-webgl"
) returns aWebGLRenderingContext
object. This context is only available on browsers that implement WebGL. HTMLCanvasElement.toDataURL()
- Returns a data-URL containing a representation of the image in the format specified by the
type
parameter (defaults topng
). The returned image is in a resolution of 96dpi. HTMLCanvasElement.toBlob()
- Creates a
Blob
object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent. HTMLCanvasElement.transferControlToOffscreen()
- Transfers control to an
OffscreenCanvas
object, either on the main thread or on a worker. HTMLCanvasElement.mozGetAsFile()
- Returns a
File
object representing the image contained in the canvas; this file is a memory-based file, with the specifiedname
. Iftype
is not specified, the image type isimage/png
.
Events
Listen to these events using addEventListener()
.
webglcontextcreationerror
- Fired if the user agent is unable to create a
WebGLRenderingContext
orWebGL2RenderingContext
context. webglcontextlost
- Fired if the user agent detects that the drawing buffer associated with a
WebGLRenderingContext
orWebGL2RenderingContext
object has been lost. webglcontextrestored
- Fired if the user agent restores the drawing buffer for a
WebGLRenderingContext
orWebGL2RenderingContext
object.
Specifications
Specification | Status | Comment |
---|---|---|
Media Capture from DOM Elements The definition of 'HTMLCanvasElement' in that specification. |
Working Draft | Adds the method captureStream() . |
HTML Living Standard The definition of 'HTMLCanvasElement' in that specification. |
Living Standard | The method getContext() now returns a RenderingContext rather than an opaque object .The transferControlToOffscreen() method has been added. |
HTML 5.1 The definition of 'HTMLCanvasElement' in that specification. |
Recommendation | |
HTML5 The definition of 'HTMLCanvasElement' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
BCD tables only load in the browser
See also
- HTML element implementing this interface:
<canvas>