JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<div id="container"></div>
    <div id="buttons">
      <input type="button" id="punch" value="Punch">
    </div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
        
        
Image <br>
<div id="mydiv" ></div>

CSS

body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        background-color: #222;
        display: inline-block;
        width: 1000px;
        height: 1200px;
      }
      #buttons {
        position: absolute;
        top: 5px;
        left: 10px;
      }
      #buttons > input {
        padding: 10px;
        display: block;
        margin-top: 5px;
      }

JavaScript

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

      var imageObj = new Image();
      imageObj.onload = function() {
          
        var blob = new Kinetic.Image({
            image: imageObj,
            x: 150,
            y: 40,
            draggable: true, 
            width: 500,
            height: 500,
        });  
          
          /*
        var blob = new Kinetic.Sprite({
          x: 150,
          y: 40,
            draggable: true, 
          image: imageObj,
          animation: 'idle',
          animations: {
            idle: [
              // x, y, width, height (4 frames)
              0,0,150,216,
              200,0,150,216,
              400,0,150,216//,
           //   391,0,520,216
            ],
            punch: [
              // x, y, width, height (3 frames)
            //  2,138,74,122,
              0,0,150,216,
              76,138,84,122,
              346,138,120,122
            ]
          },
          frameRate: 4,
          frameIndex: 0
        });
        */
          
        // add the shape to the layer
        layer.add(blob);

        // add the layer to the stage
        stage.add(layer);

        // start sprite animation
       // blob.start();

          /*
        var frameCount = 0;
        
        blob.on('frameIndexChange', function(evt) {
          if (blob.animation() === 'punch' && ++frameCount > 3) {
            blob.animation('idle');
            frameCount = 0;
          }
        });
        */
          
        document.getElementById('punch').addEventListener('click', function() {
          blob.animation('punch');
          
          var animationKey = blob.animation();  
          var startIndex = blob.frameIndex();
          var endIndex = startIndex + 4;  
          var anArrayObj = blob.animations();  
            console.log(anArrayObj);
            console.log("index:...