JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"></script>
<div id="container"></div>

CSS

body {
   margin: 0px;
           padding: 0px;
}
canvas {
   border: 5px solid #9C9898;
   left: 10px;
   top: 10px;
}

JavaScript

function zoomInOut ( evt )
{
   var zoomAmount = evt.wheelDeltaY * 0.001;
   stage.setScale ( stage.getScale ().x + zoomAmount);
   stage.setOffset ( evt.pageX, evt.pageY );
   stage.setX ( evt.pageX );
   stage.setY ( evt.pageY );
   stage.draw();
}

var stage;

   var groups = {};
   var layer;
   var rect;
   var line;
   var line2;
   var i, j, k;
   var animation;
   var minimation;
   var amplitude = 150;
   var period = 2000;
   var bigW = 200;

   stage = new Kinetic.Stage({
      container: 'container',
      width: 3 * bigW,
      height: 3 * bigW
   });

   document.addEventListener('mousewheel', zoomInOut, false );
   document.addEventListener('DOMMouseScroll', zoomInOut, false );
   
   layer = new Kinetic.Layer();

   groups [ 0 ] = new Kinetic.Group ({
      x : 50, 
      y : bigW / 2,
      draggable: true
   });

   groups [ 1 ] = new Kinetic.Group ({
      x : 300, 
      y : bigW / 2,
      draggable: true
   });

   for ( i = 0; i < 2; i++ )
   {
      rect = new Kinetic.Rect({
         width: bigW,
         height: bigW,
         fill: 'green',
         stroke: 'black',
         strokeWidth: 4
      });

      groups [ i ].add ( rect );

      for ( j = 0; j < 2; j++ )
      {
         for ( k = 0; k < 2; k++ )
         {
            rect = new Kinetic.Rect({
               x: 40 + j * 2 * 40,
               y: 40 + k * 2 * 40,
               width: 40,
               height: 40,
               fill: 'red',
               stroke: 'black',
               strokeWidth: 4
            });
            groups [ i ].add ( rect );
         }
      }
   }

   line = new Kinetic.Line ({
      points: [ groups [ 0 ].getX(), groups [ 0 ].getY(), groups [ 1 ].getX(), groups [ 1 ].getY() ],
      stroke: 'blue',
      strokeWidth: 5
   });

   line2 = new Kinetic.Line ({
      points: [ groups [ 0 ].getChildren()[ 0 ].getX(), groups [ 0 ].getChildren()[ 0 ].getY(), groups [ 1 ].getChildren()[ 3 ].getX(), groups [ 1 ].getChildren()[ 3 ].getY() ],
     ...