title: I have used Clipping Now I Want to Restrict the movement of of Image after it cross the rectangle right corner or bottom of rectangle in fabric Js
body: <p>I am new to Fabric and I have created a Rectangular shape and clipTo function for image and now i want to restrict the image in shape area. Top and left is working fine but right and bottom is not smooth. please help</p>
  <p><a href="https://jsfiddle.net/mg73n0eq/154/#&amp;togetherjs=Qh6LnTRHFq" rel="nofollow noreferrer">https://jsfiddle.net/mg73n0eq/154/#&amp;togetherjs=Qh6LnTRHFq</a></p>
  <pre><code>let canvas = new fabric.Canvas(
  &quot;ast&quot;,
     {
          width: 400,
          height: 400,
          selection: true,
          id: &quot;ast&quot;,
          //selectionBorderColor: &quot;green&quot;,
          backgroundColor: &quot;#ffffff&quot;,
          preserveObjectStacking: true,
          uniScaleTransform: true,
          //cornerSize: 40,
          lockScalingFlip: true,
          controlsAboveOverlay: true,
          subTargetCheck: true,
          hoverCursor: &quot;pointer&quot;,
          stateful: true,
        },
        null,
        &quot;anonymous&quot;
      );
      
     var Rect = new fabric.Rect({
      width: 250,
      height: 250,
      fixed: true,
      fill: &quot;#000&quot;,
      scaleX: 1,
      scaleY: 1,
      top:0,
      left:0,
      maskname: &quot;rect&quot;,
      absolutePositioned: true,
      stroke: &quot;1&quot;,
      lockScalingFlip: true,
      lockUniScaling: true,
      minScaleLimit: 0.1,
    });
  
   canvas.add(Rect);
  
   function rectMask(canvas) {
   
    //Rect.viewportCenter();
    
    
    let pugImg = new Image();
    pugImg.crossOrigin = &quot;anonymous&quot;;
    pugImg.src =&quot;https://posterapplab.com/api/images/photos/ZaJprCvDjVA.png&quot;;
  
    //console.log(size.zoom);
    pugImg.onload = function (img) {
      let pug = new fabric.Image(pugImg, {
        crossOrigin: &quot;anonymous&quot;,
        scaleX:0.3,
        scaleY:0.3,
        top: 20,
        left: 10,
        maskname: &quot;rect&quot;,
        clipPath: Rect,
        clipTo: function (ctx) {
          clipMyObject(this, ctx);
        },
      });
      pug.crossOrigin = &quot;anonymous&quot;;
      pug.backgroundVpt = false;
      pug.setControlsVisibility({
        mt: false,
        mb: false,
      });
      canvas.add(pug);
      canvas.renderAll();
    };
  
  }
  
   function clipMyObject(thisObj, ctx) {
    if (thisObj.clipPath) {
      ctx.save();
      if (thisObj.clipPath.fixed) {
        var retina = thisObj.canvas.getRetinaScaling();
        ctx.setTransform(retina, 0, 0, retina, 0, 0);
        // to handle zoom
        ctx.transform.apply(ctx, thisObj.canvas.viewportTransform);
        thisObj.clipPath.transform(ctx);
      }
  
      thisObj.clipPath._render(ctx);
      ctx.restore();
      ctx.clip();
      var x = -thisObj.width / 2,
        y = -thisObj.height / 2,
        elementToDraw;
  
      if (
        thisObj.isMoving === false &amp;&amp;
        thisObj.resizeFilter &amp;&amp;
        thisObj._needsResize()
      ) {
        thisObj._lastScaleX = thisObj.scaleX;
        thisObj._lastScaleY = thisObj.scaleY;
        thisObj.applyResizeFilters();
      }
      elementToDraw = thisObj._element;
      elementToDraw &amp;&amp;
        ctx.drawImage(
          elementToDraw,
          0,
          0,
          thisObj.width,
          thisObj.height,
          x,
          y,
          thisObj.width,
          thisObj.height
        );
      thisObj._stroke(ctx);
      thisObj._renderStroke(ctx);
    }
  }
  
  
   rectMask(canvas);
   
   canvas.on(&quot;object:moving&quot;, (e) =&gt; {
  
        if (
          e.target &amp;&amp;
          e.target.type === &quot;image&quot; &amp;&amp;
          e.target.maskname
        ) {
          //obj.canvas.lastScaleY = obj.scaleY;
          //obj.canvas.lastScaleX = obj.scaleX;
          let bound = Rect.getBoundingRect();
          let selectedBound = e.target.getBoundingRect();
         
          //selectedObject.set(&quot;left&quot;, 0);
          //console.log(bound.width);
          // console.log(bound.height);
  
          if (e.target.left &gt; Rect.left) {
            
            e.target.set(&quot;left&quot;, Rect.left);
          }
          if (e.target.top &gt; Rect.top) {
           e.target.set(&quot;top&quot;, Rect.top);
          }
         
          var right = Rect.left + Rect.getBoundingRect().width / 2;
          var bottom = Rect.top + Rect.getBoundingRect().height / 2;
  
          if (right &gt; e.target.left + e.target.width / 2) {
            //Solution one
            e.target.set(&quot;left&quot;, Rect.left - Rect.width);
          }
  
          if (bottom &gt; e.target.top + e.target.height / 2) {
            e.target.set(&quot;top&quot;, Rect.top - Rect.height / 2);
          }
          // console.log(selectedObject);
  
          /*if (selectedBound.left + selectedBound.width &lt; bin.width) {
            console.log(&quot;hjfhsafdhagsdf&quot;);
            selectedObject.set(&quot;left&quot;, bin.left - bin.width / 2);
          }*/
        }
      });
  </code></pre>
  <p>I am new to Fabric and I have created a Rectangular shape and clipTo function for image and now i want to restrict the image in shape area. Top and left is working fine but right and bottom is not smooth. please help</p>