JSFiddle - React, Tailwind, and code Playground

by Subhasish2015

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>

JavaScript

var canvas = new fabric.Canvas('c', { selection: false });

var rect, isDown, origX, origY;
var currentMouseY = 0, currentMouseX = 0;
canvas.on('mouse:down', function(o){
    isDown = true;
    var pointer = canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;
    var pointer = canvas.getPointer(o.e);
    rect = new fabric.Rect({
        left: origX,
        top: origY,
        originX: 'left',
        originY: 'top',
        width: pointer.x-origX,
        height: pointer.y-origY,
        angle: 0,
        fill: '',
        strokeWidth : 3,
        stroke:'red',
        transparentCorners: false
    });
    canvas.add(rect);
});

canvas.on('mouse:move', function(o){
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);
    
    if(origX>pointer.x){
        rect.set({ left: Math.abs(pointer.x) });
    }
    if(origY>pointer.y){
        rect.set({ top: Math.abs(pointer.y) });
    }
    
    rect.set({ width: Math.abs(origX - pointer.x) });
    rect.set({ height: Math.abs(origY - pointer.y) });
    
    
    canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
    _applyZoom();
});

var _applyZoom = function () {
    canvas.on("mouse:move", function(event) {
        currentMouseY = Math.round(event.e.clientY );
    });
    canvas.getObjects()[0].on("mousemove", function(event) {
        currentMouseX = Math.round(event.e.clientX );
    });
    var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"
    if (document.attachEvent) document.attachEvent("on"+mousewheelevt, _zoom) 
    else if (document.addEventListener) document.addEventListener(mousewheelevt, _zoom, false)
    return this;
}

function _zoom(e) {  
        var evt=window.event || e;
        var delta = evt.wheelDelta;
        var factor = 0.9;
        if (delta > 0) {
            factor = 1/factor;
        }
        var objects = canvas.getObjects();
        //applying zoom values.
        for (var i in objects) {
 ...