JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d"></div>

CSS

#d {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 300px;
    background-color: red;
}

JavaScript

var stage = new Kinetic.Stage({
    container: 'd',
    width: 300,
    height: 300
});

var layer = new Kinetic.Layer();
var isDragging = false;
var refRotation = null;

var rect = new Kinetic.Rect({
    x: 150,
    y: 150,
    width: 100,
    height: 100,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4,
    offset: [50, 50],
    dragOnTop: true,
    draggable: true,
    dragBoundFunc: function (pos) {
        var x = 150 - pos.x;
        var y = 150 - pos.y;
        var radian = Math.PI + Math.atan(y/x);
        this.setRotation(radian);
        return {
            x: this.getAbsolutePosition().x,
            y: this.getAbsolutePosition().y
        }
    }
});

layer.add(rect);
stage.add(layer);