JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/eligrey/BlobBuilder.js/master/BlobBuilder.min.js"></script>
<script src="https://raw.github.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.min.js"></script>
<script src="https://raw.github.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
<canvas id="canvasImage" width="256" height="256"></canvas>

JavaScript

var canvas = document.getElementById('canvasImage');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');

img.onload = function () {
    ctx.drawImage(img, 0, 0);
    canvas.addEventListener("mousedown", function(event) {
        canvas.toBlob(function(blob) {
            saveAs(blob, "exported_image.png");
        }, "image/png");
    });
}

img.src =...