JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="image" id="drawing">
        <img src="http://img2.wikia.nocookie.net/__cb20110130000348/tarzan/images/5/50/Tarzan.jpg">
    </div>
</body>

JavaScript

$(document).ready(function(){
    replaceImg();
});
function drawImageToCanvas() {
     canvas = document.createElement("canvas");
    canvas.className = "canvas";
    $(".image").append(canvas);
    
canvas.width = $(".image img").width();
      canvas.height = $(".image img").height();
    context = canvas.getContext("2d");
    context.drawImage($('img')[0], 0,0);
    $('img').hide();
}
function replaceImg(){
    var $img = $('img');
  if ($img[0].complete) drawImageToCanvas();
    else $img.on('load', drawImageToCanvas);
    //$('#drawing > canvas').css('background-image','url('+$(".image img").attr('src')+')');
        // $("img").hide();
}