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) {

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

        // Context
          context.beginPath();
            /* Top left */
              context.moveTo(l+h/6, h/6);
            /* Top right */
              context.lineTo(l+w*4/5, h/6);
            /* Arrow header */
              context.lineTo(l+w-h/6, h/2);
            /* Bottom right */
              context.lineTo(l+w*4/5, h-h/6);
            /* Bottom left */
              context.lineTo(l+h/6, h-h/6);
            /* Arrow feather */
              context.lineTo(l+w/5, h/2);
            /* Top left */
              context.lineTo(l+h/6, h/6); 
          context.closePath();
          
        // Fill
            context.fillStyle = "#ffffff";
            context.fill();
            
        // Text
          var x = l+w/2;
          var y = h/2 + 2;
          context.font = h/6+"px Verdana";
          context.fillStyle = "#ffffff";
          context.textAlign = "center";
          context.fillText("Hello World!", x, y);
    
    // 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);
    });
    
    kin.closeRegion();
}

$(document).ready(function() {
    kin = new Kinetic_2d("test");
    kin.setDrawStage(function() {
      
      // Update stage
        updateStage();
      
      // Clear canvas
        this.clear();
      
      // Get Canvas and Context from kin object
        var canvas = kin.getCanvas();
        var context = kin.getContext();
      
      // Draw...