JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
<canvas id="raw" width="400" height="200"></canvas>

<div id="kjs"></div>

JavaScript

function raw() {
    var raw_canvas = document.getElementById("raw");
    var raw_context = raw_canvas.getContext("2d");
    raw_context.strokeStyle = "blue";
    raw_context.lineWidth = 4;
    raw_context.strokeRect(0,0,400,200);
    
    // make a line and place some text on that line
    raw_context.beginPath();
    raw_context.moveTo(25, 100.5);
    raw_context.lineTo(375, 100.5);
    raw_context.lineWidth = 1;
    raw_context.stroke();
    
    raw_context.font = '18px Verdana';
    raw_context.textBaseline = 'bottom';
    raw_context.fillText('Bottom', 25, 100.5);
    
    raw_context.textBaseline = 'middle';
    raw_context.fillText('Middle', 175, 100.5);
    
    raw_context.textBaseline = 'top';
    raw_context.fillText('Top', 300, 100.5);

}

function kc() {
      var stage = new Kinetic.Stage({
        container: 'kjs',
        width: 400,
        height: 200
      });

      var layer = new Kinetic.Layer();

      var rect = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 400,
        height: 200,
        stroke: 'red',
        strokeWidth: 4
      });
    
      var line = new Kinetic.Line({
          points: [{x: 25, y: 100.5}, {x: 375, y: 100.5}],
        stroke: 'red',
        strokeWidth: 1,
      });
    
      var text_b = new Kinetic.Text({
        x: 25,
        y: 100.5,
        text: 'Bottom',
        fontSize: 18,
        fontFamily: 'Verdana',
        fill: 'black'
      });

      var text_m = new Kinetic.Text({
        x: 175,
        y: 100.5,
        text: 'Middle',
        fontSize: 18,
        fontFamily: 'Verdana',
        fill: 'black'
      });
    
      var text_t = new Kinetic.Text({
        x: 300,
        y: 100.5,
        text: 'Top',
        fontSize: 18,
        fontFamily: 'Verdana',
        fill: 'black'
      });    


    // add the shape to the layer
    layer.add(rect);
    layer.add(line);
    layer.add(text_b);
    layer.add(text_m);
    layer.add(text_t);

    // add the layer to the stage
   ...