JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="cv" width="350" height="350"></canvas>

CSS

#cv {
    width: 350px;
    height: 350px;
    background:#ff0;
}

JavaScript

var resource = {};
        
function load( key, url ,callback ) {
    
    if(resource[key]) {
        callback( resource[key] );
        return ;
    }
    else {
        var img = new Image();
        img.onload = function() {
            resource[key] = img;
            callback( resource[key] );
        };
        resource[key] = false;
        img.src = url;
    }
}

var $   = function ( q ){ return document.querySelector(q) };
var ctx = $('#cv').getContext("2d");


load('img_the_scream','http://www.w3schools.com/tags/img_the_scream.jpg', function( img ){
    console.log(  img.width , img.height );
    ctx.drawImage( img, 10, 10 , img.width , img.height );
});