Compare Revisions

HTMLCanvasElement

Revision 23881:

Revision 23881 by ilmarihei on

Revision 23882:

Revision 23882 by ilmarihei on

Title:
HTMLCanvasElement
HTMLCanvasElement
Slug:
DOM/HTMLCanvasElement
DOM/HTMLCanvasElement
Tags:
DOM, NeedsTechnicalReview, "Gecko DOM Reference", Fixit
DOM, NeedsTechnicalReview, "Gecko DOM Reference", Fixit
Content:

Revision 23881
Revision 23882
n90            Returns a drawing context on the canvas, or null if tn90            Returns a drawing context on the canvas, or null if t
>he context ID is not supported. A drawing context lets you draw o>he context ID is not supported. A drawing context lets you draw o
>n the canvas. The currently accepted values are '2d' and 'experim>n the canvas. The currently accepted values are '2d' and 'experim
>ental-webgl'. Calling getContext with '2d' returns a <a href="../>ental-webgl'. The 'experimental-webgl' context is only available 
>../../../en/DOM/CanvasRenderingContext2D" rel="internal">CanvasRe>on browsers that implement <a href="/En/WebGL" title="En/WebGL">W
>nderingContext2D</a> Object and 'experimental-webgl' returns a We>ebGL</a>. Calling getContext with '2d' returns a <a href="../../.
>bGLRenderingContext Object.>./../en/DOM/CanvasRenderingContext2D" rel="internal">CanvasRender
 >ingContext2D</a> Object, whereas calling it with 'experimental-we
 >bgl' returns a WebGLRenderingContext Object.
91          </td>
92        </tr>
93        <tr>
94          <td>
95            <code>mozGetAsFile(in</code> <code><a href="/En/DOM/D
>OMString" title="En/DOM/DOMString">DOMString</a></code> <code>nam 
>e, [optional] in</code> <code><a href="/En/DOM/DOMString" title=" 
>En/DOM/DOMString">DOMString</a></code> <code>type)</code> {{ geck 
>o_minversion_inline("2.0") }}&nbsp;{{ non-standard_inline() }} 
96          </td>
97          <td>
98            {{ domxref("File") }}
99          </td>
100          <td>
101            Returns a DOM&nbsp;{{ domxref("File") }} object repre
>senting 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> p 
>arameter. If <code>type</code> is not specified, the image type i 
>s <code>image/png</code>. 
nn114        <tr>
115          <td>
116            <code>mozGetAsFile(in</code> <code><a href="/En/DOM/D
 >OMString" title="En/DOM/DOMString">DOMString</a></code> <code>nam
 >e, [optional] in</code> <code><a href="/En/DOM/DOMString" title="
 >En/DOM/DOMString">DOMString</a></code> <code>type)</code> {{ geck
 >o_minversion_inline("2.0") }}&nbsp;{{ non-standard_inline() }}
117          </td>
118          <td>
119            {{ domxref("File") }}
120          </td>
121          <td>
122            Returns a DOM&nbsp;{{ domxref("File") }} object repre
 >senting 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> p
 >arameter. If <code>type</code> is not specified, the image type i
 >s <code>image/png</code>.
123          </td>
124        </tr>
tt127    <h1>
128      Example: Getting the data: URL for a canvas
129    </h1>
130    <p>
131      First do your drawing on the canvas, then call canvas.toDat
 >aURL() to get the data: URL for the canvas.
132    </p>
133    <pre class="brush: js">
134function test() {
135 var canvas = document.getElementById("canvas");
136 var url = canvas.toDataURL();
137 
138 var newImg = document.createElement("img");
139 newImg.src = url;
140 document.body.appendChild(newImg);
141}
142</pre>

Back to History