JSFiddle - React, Tailwind, and code Playground

by powerMugen

HTML

<script src="http://gone-painting.fr/domvas.js"></script>
<h2>Canvas to image</h2>


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

</canvas>

<img id="MyImg"/>
<button class="generate">generate</button>

CSS

#node-grid {
    height:200px;
    width:578px;
    position:relative;
    background:#f5f5f5;
}
#node-grid div {
    width:150px;
    height:100px;
    background-size:100px 100px;
    background-repeat:no-repeat
}

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];
    

$(document).on('click', '.generate', function () {

   drawAndConvertStuff(can);
});