The HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.

  • If the height or width of the canvas is 0 or larger than the maximum canvas size, the string "data:," is returned.
  • If the requested type is not image/png, but the returned value starts with data:image/png, then the requested type is not supported.
  • Chrome also supports the image/webp type.


canvas.toDataURL(type, encoderOptions);


type Optional

A DOMString indicating the image format. The default format type is image/png.

encoderOptions Optional

A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92. Other arguments are ignored.

Return value

A DOMString containing the requested data URI.



The canvas's bitmap is not origin clean; at least some of its contents have or may have been loaded from a site other than the one from which the document itself was loaded.


Given this <canvas> element:

<canvas id="canvas" width="5" height="5"></canvas>

You can get a data-URL of the canvas with the following lines:

var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby

Setting image quality with jpegs

var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
var lowQuality = canvas.toDataURL('image/jpeg', 0.1);

Example: Dynamically change images

You can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs. color in this example):


<img class="grayscale" src="myPicture.png" alt="Description of my picture" />


window.addEventListener('load', removeColors);

function showColorImg() { = 'none'; = 'inline';

function showGrayImg() { = 'inline'; = 'none';

function removeColors() {
  var aImages = document.getElementsByClassName('grayscale'),
      nImgsLen = aImages.length,
      oCanvas = document.createElement('canvas'),
      oCtx = oCanvas.getContext('2d');
  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
    oColorImg = aImages[nImgId];
    nWidth = oColorImg.offsetWidth;
    nHeight = oColorImg.offsetHeight;
    oCanvas.width = nWidth;
    oCanvas.height = nHeight;
    oCtx.drawImage(oColorImg, 0, 0);
    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
    aPix =;
    nPixLen = aPix.length;
    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
    oCtx.putImageData(oImgData, 0, 0);
    oGrayImg = new Image();
    oGrayImg.src = oCanvas.toDataURL();
    oGrayImg.onmouseover = showColorImg;
    oColorImg.onmouseout = showGrayImg;
    oCtx.clearRect(0, 0, nWidth, nHeight); = "none";
    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);


HTML Standard (HTML)
# dom-canvas-todataurl-dev

Browser compatibility

BCD tables only load in the browser

See also