JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<div id="container"></div>

JavaScript

$(document).ready(function() {
//initialize stage:
var stage = new Kinetic.Stage({
    container: 'container',
    width: 620,
    height: 440
});

var layer = new Kinetic.Layer({});

var circle = new Kinetic.Circle({
    x: 160,
    y: 120,
    radius: 100,
    fill: "#f0f",
    stroke: "black",
    strokeWidth: 2,
    draggable: true
});

var isDragging = false;

circle.on('mouseover', function(event) {
    circle.attrs.fill = "#ff0";
    layer.draw();
});

circle.on('mouseout', function(event) {
    circle.attrs.fill = "#f0f";
    layer.draw();
});

circle.on('dragstart', function(event) {
    isDragging = true;
    circle.attrs.opacity = 0.5;
    circle.attrs.radius = 9;
    layer.draw();
});

circle.on('dragend mouseup touchup', function(event) {
    isDragging = false;
    circle.attrs.opacity = 1;
    circle.attrs.radius = 100;
    layer.draw();
});


layer.add(circle);

stage.add(layer);
});