JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var canvas = new fabric.Canvas('c');
  var minX, minY, maxX, maxY;
  canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
  fabric.Image.fromURL('http://www.beatnyama.com/wp-content/uploads/2015/05/assets.jpg', function(img){
      img.evented=false;
      img.selectable=false;
      canvas.add(img);
      minX = img.oCoords.tl.x;
      maxX = img.oCoords.br.x;
      minY = img.oCoords.tl.y;
      maxY = img.oCoords.br.y;
      canvas.sendToBack(img);
      console.log(minX+'--'+minY+'--'+maxX+'--'+maxY)
  });
canvas.observe("object:selected", function(e){
    e.target.lockMovementX = false;
    e.target.lockMovementY = false;
});

canvas.observe("object:moving", function(e){
  console.log(minX+'--'+minY+'--'+maxX+'--'+maxY)
      var obj = e.target;
      obj.setCoords();
      var b = obj.getBoundingRect();
      if (!(b.left >= minX && maxX >= b.left + b.width)) {
          obj.left = obj.lastLeft;
      } else {
          obj.lastLeft = obj.left;
      }
      if (!(maxY >= b.top + b.height && b.top >= minY)) {
          obj.top = obj.lastTop;
      } else {
          obj.lastTop = obj.top;
      }
});