JSFiddle - React, Tailwind, and code Playground

by jlmcdonald

HTML

<div class="backgrounder"></div>
<br/>
<div class="bounder"><img src="https://i1.ytimg.com/vi/aOPGepdbfpo/mqdefault.jpg"/></div>
<br/>
<div style="position:relative"><img src="https://i1.ytimg.com/vi/aOPGepdbfpo/mqdefault.jpg" class="clipper"/></div>
<br/>
<canvas id="canvaser" width="578" height="200"></canvas>

CSS

.backgrounder  {
    width: 120px; height:51px;
    background: url(https://i1.ytimg.com/vi/aOPGepdbfpo/mqdefault.jpg) center no-repeat;
    background-size:120px 67px;
}

.bounder {
    width:120px;height:51px;overflow:hidden;
}

.bounder img {
    width: 120px;
    margin-top:-8px;
}

img.clipper {
    position:absolute;
    width: 120px;
    top:0;
    clip:rect(8px,120px,59px,0px);
}

JavaScript

var context = document.getElementById('canvaser').getContext('2d');
var imageObj = new Image();
imageObj.src = 'https://i1.ytimg.com/vi/aOPGepdbfpo/mqdefault.jpg';
imageObj.onload = function() {
    context.drawImage(imageObj, 0, 23, 320, 120, 0, 51, 120, 51);
};