JSFiddle - React, Tailwind, and code Playground

by Vijay Gujar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>
<button id='btnRotate' onclick="changeRotation()" >
Rotate
</button>

CSS

#canvas {
    box-shadow: 0 0 5px 1px black;
}

JavaScript

var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';

var canvas = new fabric.Canvas('canvas');
var cnvWidth = 200;
var cnvHeight = 200;
var angle = 0;
var _rotateScale = 0;
var _straightenValue = 0;
function changeRotation() {
if (angle === 45){
_rotateScale = 0;
angle = -5
} 
angle += 5;

var e = angle;
var img = canvas.getActiveObject();
 var t = {
                        x: img.width / 2,
                        y: img.height / 2
                    },
                    n = convertPointByAngle({
                        x: 0,
                        y: 0
                    }, t, Math.abs(e));
                t.x < t.y ? _rotateScale = 1 - n.x / t.x : _rotateScale = 1 + n.y / t.y,_straightenValue = e
	 /* var img = canvas.getActiveObject();
	    var scaleX = 0.5;//cnvWidth / img.width;
	     var scaleY = 0.5;//cnvHeight / img.height;
	     console.log(scaleX, scaleY);
	     img.set('angle',10);
	     img.scale(scaleX, scaleY);
	     img.set('left', -10);
	     img.set('top', -60); */
       var width1 = img.width * img.scaleX;
       var height1 = img.height * img.scaleY;
       
       //img.scale(_rotateScale).setCoords();
       img.set('angle',angle);
       var width2 = img.width * img.scaleX;
       var height2 = img.height * img.scaleY;
       var xGap = (width1 - width2) / 2;
       var yGap = (height1 - height2) / 2;
       
       /* img.set('left', n.x)
       img.set('top', -n.y) */
       img.setCoords();
       var boundingRectAfter = img.getBoundingRect();
       //img.set('left', xGap);
       //img.set('top', yGap);
       console.log(t,n, _rotateScale,_straightenValue);
    canvas.renderAll();
}
function convertPointByAngle(e, t, n) {
            var i = n * Math.PI / 180,
                r = Math.cos(i),
                a = -Math.sin(i);
            return {
                x: (e.x - t.x) * r - (e.y - t.y) * a + t.x,
                y: (e.x - t.x) * a + (e.y - t.y) * r + t.y
            }
        }
        
var pugImg = new Image();
var cnvWidth...