JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
<canvas id="c" width="700" height="600"></canvas>

CSS

canvas{
    border-width: 1px;
    border-style: solid;
    border-color: #333;
}

JavaScript

var canvas = new fabric.Canvas('c');

/* circle & rectangle */

var circle = new fabric.Circle({
	left: 420,
	top: 160,
    radius:144
});

var rect = new fabric.Rect({
	left: 420,
	top: 404,
    width:400,
    height:100
});

/* debug */

var circleNfo = new fabric.Text("hello",{
	left: 150,
	top: 160,
    angle: -10
});

var rectNfo =  new fabric.Text("world",{
	left: 140,
	top: 420,
    angle: -10
});

function showDebug(obj,angle,gradient,txtObj){
    if( obj.debugPoints === undefined ){
        obj.debugPoints = [
            new fabric.Circle({ left: 0, top: 0, radius:4 }),
            new fabric.Circle({ left: 0, top: 0, radius:4,fill:"pink" })
        ];
        
        canvas.add( obj.debugPoints[0] );
        canvas.add( obj.debugPoints[1] );
    }

    var owratio = obj.currentWidth  / obj.width;
    var ohratio = obj.currentHeight / obj.height;

    var dx = obj.currentWidth  >> 1;
    var dy = obj.currentHeight >> 1;
    
    var left = obj.left - dx;
    var top  = obj.top  - dy;
    
    obj.debugPoints[0].set({
        left : left + gradient.start.x * owratio,
        top  : top  + gradient.start.y * ohratio
    });
    
    obj.debugPoints[1].set({
        left : left + gradient.end.x * owratio,
        top  : top  + gradient.end.y * ohratio
    });
    
    /* debug text */
    
    var ang = angle%360, iang = rxy2angle(gradient.start.x,gradient.start.y,obj.width,obj.height);
    
    var diffang = iang - ang;
    
    var dbg = "start "+Math.round(gradient.start.x)+" ; "+Math.round(gradient.start.y);
    dbg += "\nend "+Math.round(gradient.end.x)+" ; "+Math.round(gradient.end.y)+"\nα "+(angle%360)+"°";
    dbg += "\nα' "+iang+"°\n dα "+diffang+"°";
    
    txtObj.setText(dbg);
    
    /* update text gradient */
    
    var textdx = txtObj.width  >> 1;
    var textdy = txtObj.height >> 1;
    
    txtObj.setGradient('fill',{ 
        x1: -textdx,
        y1: -textdy,
        x2: +textdx,
        y2: +textdy,
        colorStops: { 0:...