Returns the content of the current canvas as an image that you can use as a source for another canvas or an HTML element (such as img).
 |
Syntax
var retval = canvas.toDataURL(type, jpegquality);Parameters
- type [in, optional]
-
Type: string
The standard MIME type for the image format to return. If you do not specify this parameter, the default value is a PNG format image.
- jpegquality [in, optional]
-
Type: string
The quality level of a JPEG image in the range of 0.0 to 1.0.
Return value
Type: string
The image data.
Standards information
- HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.10
Remarks
Typical values for the type parameter are image/png or image/jpg.
Examples
The following code example draws some graphics on a canvas and then uses toDataURL to make an image that is assigned to an img object.
<html> <head> <title>toDataURL example</title> <script type="text/javascript"> function draw() { // Create some graphics. var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "white"; ctx.beginPath(); ctx.rect(5, 5, 300, 250); ctx.fill(); ctx.stroke(); ctx.arc(150, 150, 100, 0, Math.PI, false); ctx.stroke(); } } function putImage() { var canvas1 = document.getElementById("MyCanvas"); if (canvas1.getContext) { var ctx = canvas1.getContext("2d"); // Get the context for the canvas. var myImage = canvas1.toDataURL("image/png"); // Get the data as an image. } var imageElement = document.getElementById("MyPix"); // Get the img object. imageElement.src = myImage; // Set the src to data from the canvas. } </script> </head> <body onload="draw()" > <div> <button onclick="putImage()">Copy graphic using toDataURL</button> </div> <div> <canvas id="MyCanvas" width="400" height="400" >This browser or document mode doesn't support canvas</canvas> <img id="MyPix" /> </div> </body> </html>
See also
Build date: 11/28/2012
