JSFiddle - React, Tailwind, and code Playground

by nkchaitu8

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.4/fabric.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
 -->
<canvas id="c" width="1500" height="700">
</canvas>

<div id='my-div'>
</div>

CSS

svg * {
                fill: none;
                stroke: currentColor;
            }

canvas {
  border:10px solid red;
}

JavaScript

var selectedObject = null;
    var isCrop = false;
    var picArea = null;
    var canvas = new fabric.Canvas('c', {
        preserveObjectStacking: true,
        skipTargetFind: false,
        renderOnAddRemove: false,
    });
    canvas.observe('object:modified', function(e) {
    console.log('modified',selectedObject.custtype);
        if (selectedObject && selectedObject.custtype === 'picArea') {

            selectedObject.width *= selectedObject.scaleX;
            selectedObject.height *= selectedObject.scaleY;

            selectedObject.scaleX = 1;
            selectedObject.scaleY = 1;
        }
        canvas.renderAll();
    });

    var isBRDown = false;
    canvas.observe('mouse:down', function(e) {

        var aObj = e.target;
        if(aObj && aObj.__corner === 'br') {
            isBRDown = true;
        }
    });
     canvas.observe('object:moving', function(e) {
 			var movingBox = e.target;
      movingBox.setCoords();
			
      var top = movingBox.oCoords.tl.y;
      var bottom = top + movingBox.height;
      var left = movingBox.oCoords.tl.x;
      var right = left + movingBox.width;
      
      var boundingBox = picArea;
     boundingBox.setCoords();

      var topBound = boundingBox.oCoords.tl.y;
      var bottomBound = topBound + boundingBox.height;
      var leftBound = boundingBox.oCoords.tl.x;
      var rightBound = leftBound + boundingBox.width;
     movingBox.left = (Math.max(Math.min(left, leftBound), rightBound - movingBox.width));
     movingBox.top = (Math.max(Math.min(top, topBound), bottomBound - movingBox.height));
        }
       
    );
    canvas.observe('mouse:up', function(e) {
        isBRDown = false;
    });

    canvas.observe('object:scaling', function(e) {
    console.log('scaling');
        if (selectedObject && selectedObject.custtype === 'picArea') {

            selectedObject.width *= selectedObject.scaleX;
            selectedObject.height *= selectedObject.scaleY;

            selectedObject.scaleX = 1;
 ...