MENU


Client Side Saving

canvas.toDataURL([MIME_type][, quality]) converts the canvas to an image file.
The default image type is PNG.
When 'image/jpeg' is passed as the first argument, the second argument (0.0 to 1.0) specifies the image quality.

Passing 0 as the second argument to toDataURL() results in the poorest quality but smallest file size.
Note that right-clicking on the image will bring up a dialog box that allows you to save the image as a file.
RESETRUNFULL
<!DOCTYPE HTML><html>
  <head></head>
  <body>
    <div><canvas id="myCanvas" width="300" height="300"></canvas></div>
    <br/>
    <script>
      var canvas = document.getElementById('myCanvas');
      var c = canvas.getContext('2d');
      var I = new Image();
      I.onload = function(){
         c.drawImage(I,0,0,300,300);
         var img = canvas.toDataURL("image/jpeg",0);
         document.querySelector("div").innerHTML=`<img src="${img}"/>`;
      }
      I.src='/shared/puppy.jpg';
    </script>
  </body></html>