JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<canvas id="canvas" width=400 height=200></canvas>

CSS

body {
            background-color: ivory;
        }
        canvas {
            border:1px solid red;
        }

JavaScript

var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      var imgs = [];
      var imagesOK = 0;
      var imageURLs = [];
      imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg");
      imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house2.jpg");
      imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg");

      loadAllImages();

      function loadAllImages() {
          for (var i = 0; i < imageURLs.length; i++) {
              var img = new Image();
              imgs.push(img);
              img.onload = function () {
                  imagesOK++;
                  if (imagesOK >= imageURLs.length) {
                      drawImages();
                  }
              }; // end onload
              img.src = imageURLs[i];
          } // end for     
      }

      ctx.lineWidth = 2;
      var left = 25;
      var topp = 30;
      var width = 100;
      var height = 100;
      var rotations = [-10, 0, 10];

      function drawImages() {
          for (var i = 0; i < imgs.length; i++) {
              var img = imgs[i];
              ctx.save()
              ctx.beginPath();
              ctx.translate(left + width / 2, topp + height / 2)
              ctx.rotate(rotations[i] * Math.PI / 180);
              ctx.drawImage(img, 0, 0, img.width, img.height, -width / 2, -height / 2, width, height);
              ctx.rect(-width / 2, -height / 2, width, height);
              ctx.stroke();
              ctx.restore();
              left += 125;
          }
      }