JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="cv1" width="200" height="150"></canvas><br />

CSS

canvas {
    border: 1px solid black;
}
img {
    border: 1px solid red;
}

JavaScript

if (window.HTMLCanvasElement && !HTMLCanvasElement.prototype.toBlob) {
    HTMLCanvasElement.prototype.toBlob = function(cback) {
        var str = this.toDataURL();
        str = str.substr(str.indexOf('base64')+7);
        
        var str = atob(str);
        var buffer = new ArrayBuffer(str.length);
        var bytes = new Uint8Array(buffer);
        for (var i=0; i<str.length; ++i) {
            bytes[i] = str.charCodeAt(i);
        }
        cback(new Blob([bytes]));
    };
}

var cv = document.getElementById("cv1");
cv.getContext("2d").fillRect(12, 12, 100, 100);

cv.toBlob(function(blob) {
    // проверка, что блоб правильный
    var fr = new FileReader();
    fr.onload = function() {
        var img = new Image();
        img.src = fr.result;
        document.body.appendChild(img);
    };
    fr.readAsDataURL(blob);
});