JSFiddle - React, Tailwind, and code Playground

HTML

<!--Test one.-->
<img src="http://upload.wikimedia.org/wikipedia/commons/9/95/The_Gunk.png" alt="The Gunk" width="466" height="270" />
<!--Test two.-->
<div id="theGunk"></div>
<!--Test three.-->
<img src="http://upload.wikimedia.org/wikipedia/commons/9/95/The_Gunk.png" alt="The Gunk" id="aGunk" />
<!--Test four.-->
<img src="http://upload.wikimedia.org/wikipedia/commons/9/95/The_Gunk.png" alt="The Gunk" id="JSGunk" />
<canvas id="foo" width="233" height="135"></canvas>

CSS

#theGunk {
    background:url('http://upload.wikimedia.org/wikipedia/commons/9/95/The_Gunk.png');
    background-size:466px 270px;
    height:270px;
    width:466px;
}
#aGunk, #foo {
    width:466px;
    height:270px;
}

JavaScript

var gunk = document.getElementById('JSGunk');
gunk.style.width = '466px';
gunk.style.height = '270px';

var canvas = document.getElementById( 'foo' )
  ,    ctx = canvas.getContext( '2d' );

ctx.drawImage( gunk, 0, 0 );