JSFiddle - React, Tailwind, and code Playground

HTML

<img id="img" src="http://worldsoccertalk.com/wp-content/uploads/2009/01/cristiano-ronaldo-sporting-lisbon.jpg"/>
<canvas id="can"></canvas>

JavaScript

var img = document.getElementById('img');
var canvas = document.getElementById('can');
var ctx = canvas.getContext("2d");

var callback = function(image) {
   if(!image) image = this;
   canvas.width = img.width;
   canvas.height = img.height;
   ctx.drawImage(image, 0, 0);
}

if(img.complete) { //check if image was already loaded by the browser
   callback(img);
}else {
   img.onload = callback;
}