HTML5 Canvas Reference - toDataURL()

The toDataURL() method converts the canvas to a 64 bit encoded PNG URL.

To get the image data URL in the jpeg format, we can pass image/jpeg as the first argument in the toDataURL() method.

To control the image quality for a jpeg image, you can pass in a number from 0 to 1 as the second argument to the toDataURL() method.

Browser compatibility


`toDataURL()`	Yes	Yes	Yes	Yes	Yes

Javascript Syntax

canvas.toDataURL();

Example

The following code fills the data url to a new created image object.


<!DOCTYPE HTML>
<html>
  <body>
    <canvas id="myCanvas" width="500" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
<!--   w  w  w. j a  va2 s  .co m-->
      // draw cloud
      context.beginPath();
      context.moveTo(170, 80);
      context.bezierCurveTo(130, 100, 130, 150, 230, 150);
      context.bezierCurveTo(250, 180, 320, 180, 340, 150);
      context.bezierCurveTo(420, 150, 420, 120, 390, 100);
      context.bezierCurveTo(430, 40, 370, 30, 340, 50);
      context.bezierCurveTo(320, 5, 250, 20, 250, 50);
      context.bezierCurveTo(200, 5, 150, 20, 170, 80);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = 'red';
      context.fill();
      context.strokeStyle = '#0000ff';
      context.stroke();

      // save canvas image as data url (png format by default)
      var dataURL = canvas.toDataURL();
      console.log(dataURL);
      
      // load image from data url
      var imageObj = new Image();
      imageObj.onload = function() {
          // scale y component
          context.scale(1, 0.5);
          context.drawImage(this, 0, 0);
      };

      imageObj.src = dataURL;      
    </script>
  </body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to encode the canvas in png format.


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>
$(function(){<!-- ww  w  .j a  v a  2 s . c o m-->
    var canvas = document.createElement("canvas");
    canvas.height = canvas.width = 100;
    $('#c').append(canvas);
    var ctx = canvas.getContext("2d");
    //draw a circle
    ctx.beginPath();
    ctx.arc(25, 25, 20, 0, Math.PI*2, true); 
    ctx.closePath();
    ctx.fill();
    var dataURL = canvas.toDataURL("image/png");
    $('#i').append($('<img/>', { src : dataURL }));
});
</script>
</head>
<body>
   <div id="c"></div>
   <div id="i"></div>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to draw a smiling face and creates a new image object from it.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas= document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.strokeRect(0.5, 0.5, 10, 10);
    context.arc(5.5, 5.5, 3, 0, Math.PI);
    context.rect(3, 3, 1, 1);<!--from w  w w .  ja va 2 s  .  c  om-->
    context.rect(7, 3, 1, 1);
    context.stroke();
    var img = new Image();
    img.src = canvas.toDataURL();
    context.drawImage(img, canvas.width - 11, canvas.height - 11); 
</script>
</body>
</html>

The code above is rendered as follows: