JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="400" height="400"></canvas><br>
<!-- Note the "download" attribute here that specifies a filename -->
<a download="canvas_image.png" id="click">Save PNG image</a>

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.beginPath();
context.rect(50, 50, 200, 200);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();

document.getElementById("click").onclick = function(){
    this.href = canvas.toDataURL("image/png");
};