JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="outer">
<div class="first">
<div class="second">
<div class="third">
<img src="http://i.imgur.com/PWSOy.jpg" width="335" height="218" id="i" style="display:none;">
<canvas width="335" height="218" id="c" style="display:none;"></canvas>
<canvas width="337" height="220" id="cf"></canvas>
</div>
</div>
</div>
</div>

<a href="javascript:void(0);" id="showImage">image</a>
<a href="javascript:void(0);" id="showCanvas">canvas</a>
<a href="javascript:void(0);" id="showFixed">fixed</a>

CSS

* {
    box-sizing: border-box;
}
.outer {
    transform: translate3d(-47px, -62px, 0px);
    width: calc(100% + 47px);
    height: calc(100% + 62px);
}
.first {
    transform: translate3d(318px, 178px, 0px) rotateZ(-23deg);
    width: 167px;
    height: 109px;
    position: absolute;
    transform-origin: left top;
}
.second{
    animation: fadeOut 0.2s;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.third {
    z-index: 1;
    position: absolute;
    width: 167px;
    height: 109px;
}
#cf{
  margin-left: -1px;
  margin-top:-1px;
}

JavaScript

$(function()
{
  var canvas = document.getElementById('c');
  var ctx = canvas.getContext('2d');
  var canvasF = document.getElementById('cf');
  var ctxF = canvasF.getContext('2d');
  var img = document.createElement('IMG');
  img.onload = function () {
      ctx.drawImage(img, 0, 0, 335, 218);
      ctxF.drawImage(img, 1, 1, 335, 218);
  }
  img.src = "http://i.imgur.com/PWSOy.jpg";

  $('a#showImage').click(function() {
    $('#i').show();
    $('#c').hide();
    $('#cf').hide();
	});
  
  $('a#showCanvas').click(function() {
    $('#i').hide();
    $('#c').show();
    $('#cf').hide();
	});
  
  $('a#showFixed').click(function() {
    $('#i').hide();
    $('#c').hide();
    $('#cf').show();
	});
});