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 pos = stage.getMousePosition();
        var xd = 150 - pos.x ;
        var yd = 150 - pos.y ;
        var theta = Math.atan2(yd, xd);
        var degree = theta / (Math.PI / 180) - 45;
        this.setRotationDeg(degree);
        //var deg = theta * 180 / Math.PI;
        
/*        if (!isDragging) {
           isDragging = true;
           refRotation = deg;
        } else {
            var rotate = deg - refRotation;
            rect.setRotationDeg(deg);
        }
  */      
        return {
            x: this.getAbsolutePosition().x,
            y: this.getAbsolutePosition().y
        }
    }
});

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