JSFiddle - React, Tailwind, and code Playground

by hellomaya

HTML

<canvas style="-moz-user-select: none; cursor: crosshair;" width="400" height="400" id="c1"></canvas>

CSS

body {
    background-color:#ccc;
}

JavaScript

var canvas = new fabric.Canvas('c1');
canvas.backgroundColor = "#decdba";
canvas.renderAll();

var pos = [0, 0];

var r = document.getElementById('c1').getBoundingClientRect();
pos[0] = r.left;
pos[1] = r.top;

var mousex = 0;
var mousey = 0;
var crop = false;

//console.log(pos);

var el = new fabric.Rect({
    //left: 100,
    //top: 100,
    fill: 'transparent',
    originX: 'left',
    originY: 'top',
    stroke: '#333',
    strokeDashArray: [2,2],
    opacity: 1,
    width: 1,
    height: 1
});

el.visible = false;
canvas.add (el);

canvas.on("mouse:down", function (event) {
    console.log(event);
    el.left = event.e.pageX - pos[0];
    el.top = event.e.pageY - pos[1];
    //el.selectable = false;
    el.visible = true;
    mousex = event.e.pageX;
    mousey = event.e.pageY;
    crop = true;
});

canvas.on("mouse:move", function (event) {
    //console.log(event);
    if (crop) {
        if (event.e.pageX - mousex > 0) {
            el.width = event.e.pageX - mousex;
        }

        if (event.e.pageY - mousey > 0) {
            el.height = event.e.pageY - mousey;
        }
    }
});

canvas.on("mouse:up", function (event) {
    crop = false;
    //e.remove();
});