Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining

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



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>
      canvas {
        border:solid black 1px;

      img {
        border:solid black 1px;
  <h1>Copy graphic using toDataURL</h1>
    <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" />

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

    // 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);


See also




© 2015 Microsoft