JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<canvas id="myCanvas" width="400" height="400">

</canvas>

<a class="download">Export</a>

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillStyle = "#FFF";
ctx.globalAlpha = 0;
ctx.fillRect(0,0,c.width,c.height);
ctx.globalAlpha = 1;
ctx.fillStyle = "#000";
ctx.fillRect(25, 25, c.width - 50, c.height - 50);
ctx.fillStyle = "#F00";
ctx.fillRect(0, 0, c.width / 2, c.height);
ctx.fillStyle = "#"

$('.download').click(function () {
  $(this).attr("href", c.toDataURL("image/png").replace("image/png", "image/octet-stream")); 
  $(this).attr("download","sample.png");
});