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




© 2016 Microsoft