HTMLCanvasElement

  • Revision slug: DOM/HTMLCanvasElement
  • Revision title: HTMLCanvasElement
  • Revision id: 23881
  • Created:
  • Creator: ilmarihei
  • Is current revision? No
  • Comment 60 words added, 35 words removed

Revision Content

{{ DomRef() }}

{{ HTMLVersionHeader("5") }}

{{ gecko_minversion_header("1.8") }}

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 {{ htmlattrxref("height", "canvas") }} HTML attribute, specifying the height of the coordinate space in CSS pixels.
width
unsigned long
Reflects the {{ htmlattrxref("width", "canvas") }} 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'. Calling getContext with '2d' returns a CanvasRenderingContext2D Object and 'experimental-webgl' returns a WebGLRenderingContext Object.
mozGetAsFile(in DOMString name, [optional] in DOMString type) {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }} {{ domxref("File") }} Returns a DOM {{ domxref("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.
toDataURL(in optional DOMString type, in any... args)
DOMString

Returns a data: URL containing a representation of the image in the format specified by type (defaults to PNG).

  • If the height or width of the canvas is 0, "data:," representing the empty string, is returned.
  • If the type requested is not image/png, and the returned value starts with data:image/png, then the requested type is not supported.
  • {{ unimplemented_inline("564388") }} If the requested type is image/jpeg, then the second argument, if it is between 0.0 and 1.0, is treated as indicating image quality; if the second argument is anything else, the default value for image quality is used. Other arguments are ignored. 

{{ h1_gecko_minversion("Example: Getting a file representing the canvas", "2.0") }}

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 {{ HTMLElement("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");

{{ DOMLiveSample("mozGetAsFile.html") }}

Note: The returned file is a memory-based file, rather than one on disk.

Revision Source

<p>{{ DomRef() }}</p>
<p>{{ HTMLVersionHeader("5") }}</p>
<p>{{ gecko_minversion_header("1.8") }}</p>
<h2>HTML Canvas Element Interface</h2>
<p>DOM canvas elements expose the <a class=" external" href="http://www.w3.org/TR/html5/the-canvas-element.html#htmlcanvaselement" rel="external nofollow" target="_blank" title="http://www.w3.org/TR/html5/the-canvas-element.html#htmlcanvaselement">HTMLCanvasElement</a> 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 <a href="../../../../en/DOM/element" rel="internal">element</a> object interface.</p>
<h2>Properties</h2>
<table class="standard-table"> <thead> <tr> <th scope="col">Name</th> <th scope="col">Type</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <td><code>height<br> </code></td> <td><code>unsigned long<br> </code></td> <td>Reflects the {{ htmlattrxref("height", "canvas") }} HTML attribute, specifying the height of the coordinate space in CSS pixels.</td> </tr> <tr> <td><code>width<br> </code></td> <td><code>unsigned long<br> </code></td> <td>Reflects the {{ htmlattrxref("width", "canvas") }} HTML attribute, specifying the width of the coordinate space in CSS pixels.</td> </tr> </tbody>
</table>
<h2>Methods</h2>
<table class="standard-table"> <thead> <tr> <th scope="col">Name &amp; Arguments</th> <th scope="col">Return</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <td><code>getContext(in <a href="/En/DOM/DOMString" title="En/DOM/DOMString">DOMString</a> contextId)<br> </code></td> <td><code>object<br> </code></td> <td>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'. Calling getContext with '2d' returns a <a href="../../../../en/DOM/CanvasRenderingContext2D" rel="internal">CanvasRenderingContext2D</a> Object and 'experimental-webgl' returns a WebGLRenderingContext Object. </td> </tr> <tr> <td><code>mozGetAsFile(in </code><code><a href="/En/DOM/DOMString" title="En/DOM/DOMString">DOMString</a></code><code> name, [optional] in </code><code><a href="/En/DOM/DOMString" title="En/DOM/DOMString">DOMString</a></code><code> type)</code> {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}</td> <td>{{ domxref("File") }}</td> <td>Returns a DOM {{ domxref("File") }} object representing the image contained in the canvas; this file is a memory-based file, with the specified <code>name</code> and whose image data is of the type indicated by the optional <code>type</code> parameter. If <code>type</code> is not specified, the image type is <code>image/png</code>.</td> </tr> <tr> <td><code>toDataURL(in optional </code><code><a href="/En/DOM/DOMString" title="En/DOM/DOMString">DOMString</a></code><code> type, in any... args)<br> </code></td> <td><code><a href="/En/DOM/DOMString" title="En/DOM/DOMString">DOMString</a></code></td> <td> <p>Returns a <code>data:</code> URL containing a representation of the image in the format specified by <code>type</code> (defaults to PNG).</p> <ul> <li>If the height or width of the canvas is 0, <code>"data:,</code>" representing the empty string, is returned.</li> <li>If the type requested is not <code>image/png</code>, and the returned value starts with <code>data:image/png</code>, then the requested type is not supported.</li> <li>{{ unimplemented_inline("564388") }} If the requested type is <code>image/jpeg</code>, then the second argument, if it is between 0.0 and 1.0, is treated as indicating image quality; if the second argument is anything else, the default value for image quality is used. Other arguments are ignored. </li> </ul> </td> </tr> </tbody>
</table>
<p>{{ h1_gecko_minversion("Example: Getting a file representing the canvas", "2.0") }}</p>
<p>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 {{ HTMLElement("img") }} element to the document, whose source image is the one created using the canvas.</p>
<pre class="brush: js">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);
}
</pre>
<p>Note that here we're creating a PNG image; if you add a second parameter to the <code>mozGetAsFile()</code> call, you can specify the image type. For example, to get the image in JPEG format:</p>
<pre class="deki-transform"> var f = canvas.mozGetAsFile("test.jpg", "image/jpeg");</pre>
<p>{{ DOMLiveSample("mozGetAsFile.html") }}</p>
<div class="note"><strong>Note:</strong> The returned file is a memory-based file, rather than one on disk.</div>
Revert to this revision