JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<canvas id="viewport" width="1000" height="1000"></canvas>

CSS

#viewport { outline: 1px solid black; }

JavaScript

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');
context.save();

makeShadow();

// https://c2.staticflickr.com/6/5460/17606342392_3215ebcd7e_b.jpg

function makeShadow()
{
  var base_image = new Image();
  base_image.src = "https://c2.staticflickr.com/6/5460/17606342392_3215ebcd7e_b.jpg";
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0, base_image.width, base_image.height,
                      0, 0, base_image.width, base_image.height);
    makeBig();
  }
}

function make_base()
{
  var base_image = new Image();
  base_image.src = "http://i103.photobucket.com/albums/m134/j_vogues/books_destroy_5_zpsdwkuayba.png";
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0, base_image.width, base_image.height,
                      0, 0, base_image.width, base_image.height);
    
  }
}

function makeBig() {
  var base_image = new Image();
  base_image.src = "https://c4.staticflickr.com/8/7700/17420853528_733d6a678d_c.jpg";
  base_image.onload = function() {
    context.save();
    context.rotate(-1 * Math.PI/180);
    context.drawImage(base_image, 0, 0, base_image.width, base_image.height,
                      355, 140, 470, 715);
    context.restore();
    makePocket();
  }
}

function makePocket() {
  var base_image = new Image();
  base_image.src = "https://c1.staticflickr.com/9/8763/17582436276_872b6df1d4_n.jpg";
  base_image.onload = function() {
    context.rotate(-11 * Math.PI/180);
    context.drawImage(base_image, 0, 0, base_image.width, base_image.height,
                      82, 230, 300, 530);
    context.restore();
      
    make_base();
  }
}