Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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 elementInternet Explorer 9

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

Remarks

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

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.

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>
<html>
<head>
    <title>toDataURL example</title>
    <style>
      canvas {
        border:solid black 1px;
      }

      img {
        width:400px;
        height:400px;
        border:solid black 1px;
      }
    </style>
</head>
<body>
  <h1>Copy graphic using toDataURL</h1>
     
  <div>
    <button id="copy">Copy canvas image to image element</button> <br />
    <canvas id="MyCanvas" width="400" height="400"  >This browser or document mode doesn't support canvas</canvas>
    <img id="MyPix" src="" width="400" height="400" />
    
  </div>

  <script>
    // Create some graphics on the canvas.    
    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();
   }

    // catch the click from the button and copy the graphic
    document.getElementById("copy").addEventListener("click", function () {
      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.
    }, false);

  </script>
</body>
</html> 


See also

canvas

 

 

Show:
© 2014 Microsoft