JSFiddle - React, Tailwind, and code Playground

HTML

<img id="duckImg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Anas_platyrhynchos_male_female_quadrat.jpg/640px-Anas_platyrhynchos_male_female_quadrat.jpg">
    
<canvas id="myCanvas"></canvas>

CSS

#duckImg{
    /*display:none; takes away both, I only want the image tag to go away*/ 
}

JavaScript

$(document).ready(function(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var duck = document.getElementById("duckImg");
    canvas.height = duck.offsetHeight;
canvas.width = duck.offsetWidth; //to set the canvas's dimensions, to allow for a responsive design
ctx.drawImage(duck,0,0);
});