JSFiddle - React, Tailwind, and code Playground

by Sam Brishes

HTML

<canvas width="400" height="400"></canvas>
<button>Download</button>

CSS

button{
  vertical-align: top;
}

JavaScript

var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
var gradient = context.createLinearGradient(0, 0, 400, 0);
		gradient.addColorStop(0, "#ff0000");
		gradient.addColorStop(1, "#0000ff");
context.fillStyle = gradient;
context.fillRect(0, 0, 400, 400);

document.querySelector("button").addEventListener("click", function(event){
		event.preventDefault();
    window.location.href = canvas.toDataURL("image/png");
})