JSFiddle - React, Tailwind, and code Playground

by Vivek kt

HTML

<canvas id="canvas" width="500" height="400" />

JavaScript

var canvas = new fabric.Canvas("canvas");

var box = new fabric.Rect({
    fill: "",
    top: 10,
    left: 10,
    width: 480,
    height: 380,
    stroke: "red",
});


var box1 = new fabric.Rect({
    fill: "grey",
    top: 100,
    left: 100,
    width: 200,
    height: 50,
    stroke: "black",
});
// disable some controls and only allow scale on X axe
// /!\ 1.4.0 version has a bug with 'mr' control (fixed with v1.4.1)
/*box.setControlsVisibility({
    bl: false,
    br: false,
    tl: false,
    tr: false,
    mt: false,
    mb: false,
});*/

canvas.add(box);
canvas.add(box1);
canvas.item(0).hasControls = false;
canvas.item(0).lockRotation = true;
 canvas.item(0).lockScalingX = canvas.item(0).lockScalingY = true;
  canvas.item(0).lockMovementX = true;
 canvas.item(0).lockMovementY = true;