{{APIRef("Canvas API")}}
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 {{domxref("HTMLElement")}} interface.
Properties
Inherits properties from its parent, {{domxref("HTMLElement")}}.
- {{domxref("HTMLCanvasElement.height")}}
- A positive
integer
reflecting the {{htmlattrxref("height", "canvas")}} HTML attribute of the {{HTMLElement("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. - {{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
- A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("moz-opaque", "canvas")}} HTML attribute of the {{HTMLElement("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.
- {{domxref("HTMLCanvasElement.width")}}
- A positive
integer
reflecting the {{htmlattrxref("width", "canvas")}} HTML attribute of the {{HTMLElement("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.
Methods
Inherits methods from its parent, {{domxref("HTMLElement")}}.
- {{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
- Returns a {{domxref("CanvasCaptureMediaStream")}} that is a real-time video capture of the surface of the canvas.
- {{domxref("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 a {{domxref("CanvasRenderingContext2D")}} object, whereas calling it with"experimental-webgl"
(or"webgl"
) returns a {{domxref("WebGLRenderingContext")}} object. This context is only available on browsers that implement WebGL. - {{domxref("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. - {{domxref("HTMLCanvasElement.toBlob()")}}
- Creates a {{domxref("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.
- {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}
- Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.
- {{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
- Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified
name
. Iftype
is not specified, the image type isimage/png
.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}} | {{Spec2('Media Capture DOM Elements')}} | Adds the method captureStream() . |
{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}} | {{Spec2('HTML WHATWG')}} | The method getContext() now returns a {{domxref("RenderingContext")}} rather than an opaque object .The methods probablySupportsContext() , setContext() and transferControlToProxy() have been added. |
{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}} | {{Spec2('HTML5.1')}} | |
{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}} | {{Spec2('HTML5 W3C')}} | Initial definition. |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support (2D context) |
4.0 | {{CompatGeckoDesktop('1.9.2')}} | 9.0 | 9.0 [1] | 3.1 |
toBlob() |
50 | {{CompatGeckoDesktop('19')}} [2] | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatNo}} (bug 71270) |
probablySupportsContext() ,setContext() ,transferControlToProxy() {{experimental_inline}} |
{{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}} |
{{CompatNo}} | {{CompatGeckoDesktop('2')}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
captureStream() {{experimental_inline}} |
{{CompatNo}} | {{CompatGeckoDesktop('41')}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
transferControlToOffscreen() {{experimental_inline}} |
{{CompatNo}} | {{CompatGeckoDesktop(44)}} [3] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support (2D context) |
2.1 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | 10.0 [1] | 3.2 |
webgl context |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatVersionUnknown}} as experimental-webgl |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
toBlob() |
{{CompatNo}} (bug 67587) | 50 | {{CompatGeckoMobile('18')}} [2] | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatNo}} (bug 71270) |
probablySupportsContext() ,setContext() ,transferControlToProxy() {{experimental_inline}} |
{{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}} |
{{CompatNo}} | {{CompatNo}} | {{CompatGeckoMobile('2')}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
captureStream() {{experimental_inline}} |
{{CompatNo}} | {{CompatNo}} | {{CompatGeckoMobile('41')}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
transferControlToOffscreen() {{experimental_inline}} |
{{CompatNo}} | {{CompatNo}} | {{CompatGeckoMobile(44)}} [3] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
[1] Opera Mini 5.0 and later has partial support.
[2] Support for the third parameter, has been added in Gecko 25 only: when used with the "image/jpeg"
type, this argument specifies the image quality.
[3] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled
to true
.
See also
- HTML element implementing this interface: {{HTMLElement("canvas")}}.