title: Prevent Fabric js Objects from scaling out of the canvas boundary
body: <p>I have been trying to keep an object (constructed in fabric js over a canvas) inside the boundaries at all the times. It has been achieved at moving and rotating it. I took help from <a href="https://stackoverflow.com/questions/22910496/move-object-within-canvas-boundary-limit">Move object within canvas boundary limit</a> for achieving this. But when I start to scale the object, it simply keeps on going out of boundary. I do not understand what has to be done to keep it inside the boundary only, even while scaling. Please help me with a code to prevent this behavior. It would be great if you can attach a demo too.</p>
  
  <pre><code>    &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Basic usage&lt;/title&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id="canvas" style= "border: 1px solid black" height= 480 width = 360&gt;&lt;/canvas&gt;
  &lt;script&gt;
   var canvas = new fabric.Canvas('canvas');
    canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
  
    canvas.item(0).set({
      borderColor: 'gray',
      cornerColor: 'black',
      cornerSize: 12,
      transparentCorners: true
    });
    canvas.setActiveObject(canvas.item(0));
    canvas.renderAll();
  
  
    canvas.on('object:moving', function (e) {
          var obj = e.target;
           // if object is too big ignore
          if(obj.currentHeight &gt; obj.canvas.height || obj.currentWidth &gt; obj.canvas.width){
              return;
          }        
          obj.setCoords();        
          // top-left  corner
          if(obj.getBoundingRect().top &lt; 0 || obj.getBoundingRect().left &lt; 0){
              obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
              obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
          }
          // bot-right corner
          if(obj.getBoundingRect().top+obj.getBoundingRect().height  &gt; obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width  &gt; obj.canvas.width){
              obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
              obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
          }
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My demo is attached here. : 
  <a href="https://jsfiddle.net/3v0cLaLk/" rel="noreferrer">https://jsfiddle.net/3v0cLaLk/</a></p>