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>

CSS

img{
    border-style: solid;
    border-width: 5px;
    border-color: blue
}

canvas{
    border-style: solid;
    border-width: 5px;
    border-color: red
}

JavaScript

$(document).ready(function(){
    replaceImg();
});

function replaceImg(){
    canvas = document.createElement("canvas");
    canvas.className = "canvas";
    $(".image").append(canvas);
    context = canvas.getContext("2d");
    $('#drawing > canvas').css('background-image','url('+$(".image img").attr('src')+')');
    context.canvas.width = $(".image img").width();
    context.canvas.height = $(".image img").height();
    // $("img").hide();
}