JSFiddle - React, Tailwind, and code Playground

by flxf

HTML

<body>
    <canvas id="bounded" width="1000" height="600" />
</body>

JavaScript

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

    var boundingBox = new fabric.Rect({
      fill: "none",
      width: 600,
      height: 400,
      hasBorders: false,
      hasControls: false,
      lockMovementX: true,
      lockMovementY: true,
      evented: false,
      stroke: "red"
    });

    var movingBox = new fabric.Rect({
      width: 100,
      height: 100,
      hasBorders: false,
      hasControls: false
    });

    canvas.on("object:moving", function() {
      var top = movingBox.top;
      var bottom = top + movingBox.height;
      var left = movingBox.left;
      var right = left + movingBox.width;

      var topBound = boundingBox.top;
      var bottomBound = topBound + boundingBox.height;
      var leftBound = boundingBox.left;
      var rightBound = leftBound + boundingBox.width;

      movingBox.setLeft(Math.min(Math.max(left, leftBound), rightBound - movingBox.width));
      movingBox.setTop(Math.min(Math.max(top, topBound), bottomBound - movingBox.height));
   });

   canvas.add(boundingBox);
   canvas.add(movingBox);