JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://blockly.googlecode.com/svn-history/r268/trunk/demos/codetw/FileSaver.min.js"></script>
<canvas width=100 height=100 id="MyCanvas">You don't have canvases </canvas>
<div onclick="startDemo();">Click me to check this beauty</div>

JavaScript

window.onload=function(){
    (function(a){"use strict";var b=a.HTMLCanvasElement&&a.HTMLCanvasElement.prototype,c=a.Blob&&function(){try{return Boolean(new Blob)}catch(a){return!1}}(),d=c&&a.Uint8Array&&function(){try{return(new Blob([new Uint8Array(100)])).size===100}catch(a){return!1}}(),e=a.BlobBuilder||a.WebKitBlobBuilder||a.MozBlobBuilder||a.MSBlobBuilder,f=(c||e)&&a.atob&&a.ArrayBuffer&&a.Uint8Array&&function(a){var b,f,g,h,i,j;a.split(",")[0].indexOf("base64")>=0?b=atob(a.split(",")[1]):b=decodeURIComponent(a.split(",")[1]),f=new ArrayBuffer(b.length),g=new Uint8Array(f);for(h=0;h<b.length;h+=1)g[h]=b.charCodeAt(h);return i=a.split(",")[0].split(":")[1].split(";")[0],c?new Blob([d?g:f],{type:i}):(j=new e,j.append(f),j.getBlob(i))};a.HTMLCanvasElement&&!b.toBlob&&(b.mozGetAsFile?b.toBlob=function(a,c,d){d&&b.toDataURL&&f?a(f(this.toDataURL(c,d))):a(this.mozGetAsFile("blob",c))}:b.toDataURL&&f&&(b.toBlob=function(a,b,c){a(f(this.toDataURL(b,c)))})),typeof define=="function"&&define.amd?define(function(){return f}):a.dataURLtoBlob=f})(this);
};

function startDemo(){
base_image = new Image();
base_image.src ='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
base_image.onload = function(){
    var canvas = document.getElementById("MyCanvas");
    context = canvas.getContext('2d');

    // Draw image within
    context.drawImage(base_image, 0,0);
    // Save the canvas
    saveCanvas(canvas);
    // Remove it
};
}


function saveCanvas(x_canvas){
    x_canvas.toBlob(function(blob) {
        saveAs(
            blob
            , "screenshot.png"
        );
    }, "image/png");
}