JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Canvas to image</h2>


<canvas id="MyCanvas" width="300" height="300">

</canvas>

<img id="MyImg"/>

JavaScript

function drawAndConvertStuff(canvas) {
        var canvasContext = canvas.getContext('2d');
        //draw a black box
        canvasContext.fillRect(100, 100, 100, 100);
        //create image object
        var img = new Image();
        img.src = 'http://www.google.com/intl/en_com/images/srpr/logo3w.png';
        //wait until the image is loaded
        img.onload = function() {
            //draw the image
            canvasContext.drawImage(img, 0, 0);

            //convert it to image
            var imgSrc = canvas.toDataURL("image/png");
            $('#MyImg').attr('src', imgSrc);
        };
    }

    //get the context. Non-jquery alternate: document.getElementById('MyCanvas').getContext('2d');
    var can = $('#MyCanvas')[0];
    drawAndConvertStuff(can);