JSFiddle - React, Tailwind, and code Playground

by rahulr

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.js"></script>
<div class="col-md-6">
    <button class="btn btn-primary" type="button" id="cropB">Crop</button>
  </div>
  <div class="col-md-12" id="canvas-container" style="height: 100%; border: 1px solid red">
    <canvas id="canvas" class="canvas" style="height: 100%; width: 100%"></canvas>
  </div>

JavaScript

// set to the event when the user pressed the mouse button down
var mouseDown;
// only allow one crop. turn it off after that
var disabled = false;
var rectCount = 0; 
var rectangle = new fabric.Rect({
    fill: 'transparent',
    stroke: '#ccc',
    strokeWidth: 2
});
var container = document.getElementById('canvas').getBoundingClientRect();
var canvas = new fabric.Canvas('canvas');
canvas.setWidth(1300);
canvas.setHeight(900);
canvas.add(rectangle);
canvas.crossOrigin = "Anonymous";
var image, image1, image2;
var ctx = canvas.getContext('2d');
        
fabric.util.loadImage("https://ssxmigrationblobstorage.blob.core.windows.net/appdeficiencyphotos/SSPoC/400/001_01.JPG", function(img) {
    image = new fabric.Image(img); 
    image.objectCaching = false;
    //image.scaleToHeight(200);
    //image.scaleToWidth(200);
    image.set({top:0, left:0});
    image.scaleX = image.scaleY = 1;
    image.selectable = false;		
    image.crossOrigin = "Anonymous";
    canvas.add(image);
    canvas.renderAll();
});

fabric.util.loadImage("https://ssxmigrationblobstorage.blob.core.windows.net/appdeficiencyphotos/SSPoC/400/001_02.JPG", function(img1) {
    image1 = new fabric.Image(img1);
    image1.objectCaching = false;
    //image1.scaleToHeight(200);
    //image1.scaleToWidth(200);
    image1.set({top:0, left:605});
    image1.scaleX = image1.scaleY = 1;
    image1.selectable = false;
    image1.crossOrigin = "Anonymous";
    canvas.add(image1);
    canvas.renderAll();
});

fabric.util.loadImage("https://ssxmigrationblobstorage.blob.core.windows.net/appdeficiencyphotos/SSPoC/400/001_03.JPG", function(img) {
    image2 = new fabric.Image(img);
    //image2.scaleToHeight(200);
    //image2.scaleToWidth(200);
    image2.set({top:410, left:0});
    image2.selectable = false;
    canvas.add(image2);
    canvas.renderAll();
});

fabric.Image.prototype.customClipTo = function (rect) {
    // var imgCenterX = this.width/2;
    // var imgCenterY = this.height/2;
    // var rectEnd =...