JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  <script src="http://www.kineticjs.com/download/kinetic2d-v1.0.2.js"></script>
  <style type="text/css">
    body {
        background: khaki;
        margin: 10px;
    }
    div#test {
      display: block;
      position: relative;
      background: none;
    }
  </style>

</head>
<body>

  <div>

   <canvas height="100" width="600" id="test"></canvas>

  </div>

</body>
</html>

JavaScript

function drawShape(left) {

// Begin Region
kin.beginRegion();
    
  // Vars  
  canvas = kin.canvas;
  context = kin.context;
  canvas.ZIndex = 99;
  w = 180;
  h = w * 11/20;
  l = left;

        // Context
        context.beginPath();
          context.moveTo(l+h/6, h/6);
          context.lineTo(l+w*4/5, h/6);
          context.lineTo(l+w-h/6, h/2);
          context.lineTo(l+w*4/5, h-h/6);
          context.lineTo(l+h/6, h-h/6);
          context.lineTo(l+w/5, h/2);
          context.lineTo(l+h/6, h/6); 
        context.closePath();
    
        context.fillStyle = "#ffffff";
        context.fill();

        context.font = h/6+"px Verdana";
        context.fillStyle = "#ffffff";
        context.textAlign = "center";
        context.fillText("Hello World!", l+w/2, h/2 + 2);
    
// Eventlisteners
  kin.addRegionEventListener("mousedown", function(){
    
      // Stroke
        context.lineWidth = h/6;
        context.strokeStyle = "#444444";
        context.lineJoin = "round";
        context.stroke();
      // Scale
        context.scale(1.25, 1.25);
      // Color!
        context.fillStyle = "#ABD822";
        context.fill();
  });
    
  kin.addRegionEventListener("mouseup", function(){
      // Scale 
        context.scale(0.8, 0.8);
  });
    
// Close Region
kin.closeRegion();
}

$(document).ready(function() {
    kin = new Kinetic_2d("test");
    kin.setDrawStage(function() {
      
      // Clear canvas
        this.clear();
      
      // Get Canvas and Context from kin object
        var canvas = kin.getCanvas();
        var context = kin.getContext();
      
      // Draw context 4 times, each time moving it to the left with "drawShape(left)"
      for (x=0;x<4;x++) {
        drawShape(x * 128);
      }
      
    });  
});