JSFiddle - React, Tailwind, and code Playground

by Ian Oxley

HTML

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

JavaScript

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