JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
  </head>

  <body>
    <canvas id="c" width="1280" height="729"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/451/fabric.min.js"></script>
    <script src="index.js"></script>
    <div id="User_nput">
      <label for="Length">Length:</label><br />
      <input type="number" id="Length" name="Length" value="400" /><br />
      <label for="Width">Width:</label><br />
      <input type="number" id="Width" name="Width" value="300" /><br /><br />
      <input type="submit" value="Submit" />
    </div>
  </body>
</html>

JavaScript

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

var rect = new fabric.Rect({
  fill: "red",
  width: 300,
  height: 400,
  stroke: "gray",
  strokeWidth: 30,
  fill: "lightgray",
  centeredRotation: true,
  centeredScaling: true,
});

canvas.on("object:scaling", function () {
  var obj = canvas.getActiveObject(),
    width = obj.width,
    height = obj.height,
    scaleX = obj.scaleX,
    scaleY = obj.scaleY;

  obj.set({
    width: width * scaleX,
    height: height * scaleY,
    scaleX: 1,
    scaleY: 1,
  });
});

rect.setControlsVisibility({
  mt: false,
  mb: false,
  ml: false,
  mr: false,
  bl: false,
  br: false,
  tl: false,
  tr: false,
  mtr: false,
});

canvas.add(rect);

canvas.centerObject(rect);
canvas.setActiveObject(rect);

canvas.item(0).lockMovementX = true;
canvas.item(0).lockMovementY = true;
//object.hasControls = object.hasBorders = false;

var Length = document.getElementById("Length");
var Width = document.getElementById("Width");

Length.addEventListener("input", Modify_Length);
Width.addEventListener("input", Modify_Width);

function Modify_Length() {
  var rect = new fabric.Rect({
    fill: "red",
    width: parseFloat(Width.value) || 300,
    height: 400 || parseFloat(Length.value),
    stroke: "gray",
    strokeWidth: 30,
    fill: "lightgray",
    centeredRotation: true,
    centeredScaling: true,
  });
}
function Modify_Width() {
  var rect = new fabric.Rect({
    fill: "red",
    width: parseFloat(Width.value) || 300,
    height: parseFloat(Length.value) || 400,
    stroke: "gray",
    strokeWidth: 30,
    fill: "lightgray",
    centeredRotation: true,
    centeredScaling: true,
  });
}

canvas.renderAll();