How to save HTML Canvas as an Image with canvas.toDataURL()?

HTML Web Development Front End Technology

Use toDataURL() method to get the image data URL of the canvas. It converts the drawing (canvas) into a64 bit encoded PNG URL.

Example

You can try to run the following code to save the canvas as an image −

<!DOCTYPE HTML>
<html>
   <head>
   </head>
   <body>
      <canvasid = "newCanvas" width = "450" height = "300"></canvas>
      <script>
         var canvas = document.getElementById('newCanvas');
         var ctx = canvas.getContext('2d');
         // draw any shape
         ctx.beginPath();
         ctx.moveTo(120, 50);
         ctx.bezierCurveTo(130,100, 130, 250, 330, 150);
         ctx.bezierCurveTo(350,180, 320, 180, 240, 150);
         ctx.bezierCurveTo(320,150, 420, 120, 390, 100);
         ctx.bezierCurveTo(130,40, 370, 30, 240, 50);
         ctx.bezierCurveTo(220,7, 350, 20, 150, 50);
         ctx.bezierCurveTo(250,5, 150, 20, 170, 80);
         ctx.closePath();
         ctx.lineWidth = 3;
         ctx.fillStyle ='#F1F1F1';
         ctx.fill();
         ctx.stroke();
         var dataURL =canvas.toDataURL();
      </script>
   </body>
</html>

Radhakrishna

Published on 20-Mar-2018 11:14:11

Previous Page Print Page