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

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

The canvas element

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.

Try the example in your browser.

HTML


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