JSFiddle - React, Tailwind, and code Playground

by pukster

HTML

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"></script>
    <script>
      var stage;
      var layer;
      var rows = 3;
      var cols = 5;
      var r = 30;
      var amplitude = 25;
      var period = 2000;
      var circles = {};
      var anims = {};
      
      function loadImages(sources, callback) {
         var images = {};
         var loadedImages = 0;
         var numImages = 0;
         // get num of sources
         for(var src in sources) {
            numImages++;
         }
         for(var src in sources) {
            images[src] = new Image();
            images[src].onload = function() {
               if(++loadedImages >= numImages) {
                  callback(images);
               }
            };
            images[src].src = sources[src];
         }
      }
      function draw ( images )
      {
         var circle;
         var index;
         var i, j;
         
         for ( i = 0; i < rows; i++ )
         {
            for ( j = 0; j < cols; j++ )
            {
               index = i * cols + j;
               // console.log ( i + '/' + rows + ' ' + j + '/' + cols + ' ' + index );
               circle = new Kinetic.Circle({
                  x: j * ( r * 4.5 ),
                  y:  i * ( r * 4.5 ),
                  radius: r,
                  fill:
                  {
                     image: images.darthVader,
                     offset: [ -220, -70 ]
                  },
                  stroke: "black",
                  strokeWidth: 4,
                  draggable: true,
                  dragBoundFunc: function ( pos, evt )
                  {
                     var x = this.attrs.originalX + r;
                     var y = this.attrs.originalY + r;
                     var radius = 50;
             ...