toDataURL method

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).

The canvas element


var retval = canvas.toDataURL(type, jpegquality);


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: number

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


Typical values for the type parameter are image/png or image/jpeg. The type image/gif isn't supported.


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.

Result output of code example showing a graphic produced with canvas and the snapshot of it as a png image.

Try the example in your browser.

<!DOCTYPE html>
    <title>toDataURL example</title>

     Copy graphic using toDataURL
    <canvas id="MyCanvas" width="400" height="400" onclick="putImage();" >This browser or document mode doesn't support canvas</canvas>
    <img id="MyPix" src=""/>

    // Create some graphics.    
    var canvas = document.getElementById("MyCanvas");
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "white";
      ctx.rect(5, 5, 300, 250);
      ctx.arc(150, 150, 100, 0, Math.PI, false);

   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.

See also




© 2014 Microsoft