JSFiddle - React, Tailwind, and code Playground

by jkosoy

HTML

<canvas id="myCanvas" width="100" height="100"></canvas>
<a id="myButton" href="#">Click to save image</a>

CSS

canvas {
    border:5px solid black;
    display:block;
    margin-bottom:10px;
}

a {
    display:inline-block;
    font-family:Arial, sans-serif;
    padding:30px 5px;
    background:#355E95;
    color:white;
    text-decoration:none;
}
a:hover {
}

JavaScript

// our canvas
var myCanvas = document.getElementById("myCanvas"); 
var myContext = myCanvas.getContext("2d");

// draw a circle
var x = myCanvas.width/2;
var y = myCanvas.height/2;
var radius = 20;

myContext.beginPath();
myContext.arc(x, y, radius, 0, 2 * Math.PI, false);
myContext.fillStyle = '#00ff00';
myContext.fill();


// the button
var myButton = document.getElementById("myButton");

myButton.onclick = function (evt) {
    var dataUri = myCanvas.toDataURL();

    window.open(dataUri, "_blank");
};