JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.batatua.com:3000/lib/kineticjs/kinetic.min.js"></script>
<div id="container">

</div>

JavaScript

function writeMessage(messageLayer, message) {
  var context = messageLayer.getContext();
  messageLayer.clear();
  context.font = '18pt Calibri';
  context.fillStyle = 'black';
  context.fillText(message, 10, 25);
}

var stage = new Kinetic.Stage({
  container: "container",
  width: 578,
  height: 200
});

var shapesLayer = new Kinetic.Layer();
var messageLayer = new Kinetic.Layer();

var hoverGroup = new Kinetic.Group({
  x: 0,
  y: 0
});       

var triangle = new Kinetic.RegularPolygon({
  x: 190,
  y: 100,
  sides: 3,
  radius: 30,
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 4
});

var circle  = new Kinetic.Shape({
    drawFunc: function(context) {
        context.beginPath();
        context.moveTo(10, 10);
        context.lineTo(100, 10);
        context.moveTo(20, 50);
        context.lineTo(0, 15);
        context.closePath();

        this.fill(context);
        this.stroke(context);
    },
    fill: "#0FD2FF",
    stroke: "orange"
});


circle.on('mouseover', function() {
  writeMessage(messageLayer, 'Mouseover circle');
});
circle.on('mouseout', function() {
  writeMessage(messageLayer, 'Mouseout circle');
});

triangle.setListening(false);

shapesLayer.add(circle);
shapesLayer.add(triangle);

stage.add(shapesLayer);
stage.add(messageLayer);