Save a canvas as a PNG Using the download attribute

HTML canvas element  is used to draw 2D shapes using Javascript.  It can also be converted to an image (png, jpeg, etc.) and can be embedded in the HTML page using <img> tag. We use html canvas element  and javascript to convert canvas to image (png, jpg) . There  are the  few steps to convert canvs to image:

1. First we get the html5 canvas and anchor tag (to download  image) .

You can insert below code in  between <body>  </body> tag in your html file

<canvas id="c" width="400" height="280"></canvas>
<footer>
        <a id="download-canvas" href="#">Download</a>
 </footer>

2. Second we use javascript to draw (shape) element on canvas. and create data url for anchor tag and specify the image name.

Insert below code in between <script></script> tag in your file

(function() {
    var canvas = document.getElementById('c'),
        cxt = canvas.getContext('2d'),
        downloadLink = document.getElementById('download-canvas');
        cxt.fillStyle = 'deepskyblue';
        cxt.fillRect(100, 50, 200, 200);
        cxt.clearRect(150, 100, 100, 100);
       downloadLink.href = canvas.toDataURL();
       downloadLink.download = "squares.png";
})();

Now your image is ready to download . By simply click on anchor tag you can download your image.