JSFiddle - React, Tailwind, and code Playground

by Ajay Patel

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.3.min.js"></script>
<div id="container"></div>

CSS

body {
            background-color: ivory;
            padding:30px;
        }
        #container {
            width:200px;
            height:200px;
            border:1px solid red;
        }

JavaScript

var stage = new Kinetic.Stage({
          container: 'container',
          width: 200,
          height: 200
      });
      var layer = new Kinetic.Layer();
      stage.add(layer);

      // create an image to zoom
      var zoomImage = new Image();
      var halfCanvas = document.createElement("canvas");
      var halfCtx = halfCanvas.getContext("2d");
      var width;
      var height;
      var halfWidth;
      var halfHeight;
      var zoomer;
      var zSize = 60;
      var zOffset = zSize / 2;

      zoomImage.onload = function () {
          width = zoomImage.width;
          height = zoomImage.height;
          halfWidth = width / 2;
          halfHeight = height / 2;
          halfCanvas.width = halfWidth;
          halfCanvas.height = halfHeight;
          halfCtx.drawImage(zoomImage,
          0, 0, width, height,
          0, 0, halfWidth, halfHeight);
          addZoomer();
      }
      zoomImage.crossOrigin = "anonymous";
      zoomImage.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";

      function addZoomer(image) {

          zoomer = new Kinetic.Shape({
              drawFunc: function (canvas) {
                  var ctx = canvas.getContext();
                  ctx.beginPath();

                  ctx.rect(zOffset, zOffset, halfWidth, halfHeight);
                  ctx.drawImage(halfCanvas, zOffset, zOffset);

                  if (this.MouseIsDown) {
                      var ix = this.mouseX * 2 - zOffset;
                      var iy = this.mouseY * 2 - zOffset;
                      // adjust if zoom is off the image
                      if (ix < 0) {
                          ix = 0;
                      };
                      if (ix > width) {
                          ix = width - zSize;
                      };
                      if (iy < 0) {
                          iy = 0;
                      };
                      if (iy > height) {
                          iy = height - zSize;
   ...