JSFiddle - React, Tailwind, and code Playground

by Vijay Gujar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.5/fabric.js"></script>
<canvas id="canvas" width="500" height="500"></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;

var clipPath;// = new fabric.Rect({ top: 10, left: 10, width: 480, height: 480, absolutePositioned: true});
clipPath = new fabric.Path('M 162.824 27 L 337.176 27 C 349.359 27 359.25 36.891 359.25 49.074 L 359.25 450.926 C 359.25 463.109 349.359 473 337.176 473 L 162.824 473 C 150.641 473 140.75 463.109 140.75 450.926 L 140.75 49.074 C 140.75 36.891 150.641 27 162.824 27 Z  M 190.041 66 C 200.046 66 208.168 74.206 208.168 84.312 L 208.168 141.688 C 208.168 151.794 200.046 160 190.041 160 C 180.037 160 171.915 151.794 171.915 141.688 L 171.915 84.312 C 171.915 74.206 180.037 66 190.041 66 Z');
clipPath.set({ fill: 'red', fillRule: 'evenodd', absolutePositioned: true});

/* var innerClipPath = new fabric.Rect({ top: 0, left: 0, width: 500, height: 500 ,absolutePositioned: true});
clipPath.clipPath = innerClipPath; */
//canvas.add(clipPath);
/* var innerClipPath = new fabric.Rect({ top: -90, left: -90 });
clipPath.clipPath = innerClipPath; */
 /*  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ]); */
  //group.clipPath = clipPath;
  //canvas.add(group);
  
/* 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 ?...