Table of contents
HTML canvas element interface
DOM canvas elements expose the HTMLCanvasElement interface, which provides properties and methods for manipulating the layout and presentation of canvas elements. The HTMLCanvasElement interface inherits the properties and methods of the
element
object interface.
Properties
| Name | Type | Description |
|---|---|---|
height | unsigned long | Reflects the
height
HTML attribute, specifying the height of the coordinate space in CSS pixels. |
width | unsigned long | Reflects the
width
HTML attribute, specifying the width of the coordinate space in CSS pixels. |
Methods
| Name & Arguments | Return | Description |
|---|---|---|
getContext(in DOMString contextId) | object | 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. The currently accepted values are "2d" and "experimental-webgl". The "experimental-webgl" context is only available on browsers that implement WebGL. Calling getContext with "2d" returns a CanvasRenderingContext2D Object, whereas calling it with "experimental-webgl" returns a WebGLRenderingContext Object. |
toDataURL(in optional DOMString type, in any... args) | DOMString | Returns a
Gecko 5.0 note
(Firefox 5.0)
Starting in Gecko 5.0 (Firefox 5.0) , the MIME type is automatically converted to lower-case as required by the specification. |
mozGetAsFile(in DOMString name, [optional] in DOMString type)
Requires Gecko 2.0 Non-standard |
File
| Returns a DOM
File
object representing the image contained in the canvas; this file is a memory-based file, with the specified name and whose image data is of the type indicated by the optional type parameter. If type is not specified, the image type is image/png. |
Example: Getting the data: URL for a canvas
First do your drawing on the canvas, then call canvas.toDataURL() to get the data: URL for the canvas.
function test() {
var canvas = document.getElementById("canvas");
var url = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = url;
document.body.appendChild(newImg);
}
Requires Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
Example: Getting a file representing the canvas
Once you've drawn content into a canvas, you can convert it into a file of any supported image format. The code snippet below, for example, takes the image in the canvas element whose ID is "canvas", obtains a copy of it as a PNG image, then appends a new
<img> element to the document, whose source image is the one created using the canvas.
function test() {
var canvas = document.getElementById("canvas");
var f = canvas.mozGetAsFile("test.png");
var newImg = document.createElement("img");
newImg.src = f.getAsDataURL();
document.body.appendChild(newImg);
}
Note that here we're creating a PNG image; if you add a second parameter to the mozGetAsFile() call, you can specify the image type. For example, to get the image in JPEG format:
var f = canvas.mozGetAsFile("test.jpg", "image/jpeg");
