JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container1"></div>
<div id="container2"></div>

CSS

canvas, img {
    float:left;
    margin-right:10px;
}

img {
    border: 2px solid #f00;
}

canvas {
    border: 2px solid #00f;
}

div {
    overflow:hidden;
    margin:10px;
}

#container2 img,
#container2 canvas {
    width:32px;
    height:32px;
}

JavaScript

var img = new Image();
img.width = 64;
img.height = 64;
img.src = 'http://upload.wikimedia.org/wikipedia/commons/f/f0/Pixelart-tv-iso.png';

var img2 = new Image();
img2.width = 64;
img2.height = 64;
img2.src = 'http://upload.wikimedia.org/wikipedia/commons/f/f0/Pixelart-tv-iso.png';

var canvas = document.createElement('canvas');
canvas.width = 64;
canvas.height = 64;

var canvas2 = document.createElement('canvas');
canvas2.width = 64;
canvas2.height = 64;

img.onload = function () {
    var ctx = canvas.getContext('2d'),
        el = document.getElementById('container1');
    ctx.drawImage(img, 0, 00, 64, 64, 0, 0, 64, 64);
    
    el.appendChild(img);
    el.appendChild(canvas);
};

img2.onload = function () {
    var ctx = canvas2.getContext('2d'),
        el = document.getElementById('container2');
    ctx.drawImage(img2, 0, 00, 64, 64, 0, 0, 64, 64);
    
    el.appendChild(img2);
    el.appendChild(canvas2);
};