title: Fabric.js dynamic clipping regions affecting images and SVG/shapes differently
body: <p>I have a Fabric.js canvas that allows for dynamic clipping based on the region an object occupies.  However, the clipping regions treat SVG/shapes differently than images, making them offset slightly and "breaking through" the clipping area.  To recreate:</p>
  
  <ol>
  <li>Go to <a href="https://jsfiddle.net/mikewagz/hncqbhah/" rel="nofollow noreferrer">https://jsfiddle.net/mikewagz/hncqbhah/</a></li>
  <li>Drag the logo to the boundary of the clipping region - this clips correctly, being clipped to whatever region its center occupies without breaking the boundary.</li>
  <li>Now grab a shape and drag it to the clipping region.  You can see a small amount of it beneath the boundary.</li>
  <li>Scaling up the shape exacerbates the problem, showing an increasing amount of pixels below the clipping area.  Note that it also offsets the clipping area in the same direction on the top and left.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/SoEGg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SoEGg.png" alt="enter image description here"></a></p>
  
  <p>How can this be corrected?  Any help is very appreciated, thank you!</p>
  
  <p>Code for clipping function:</p>
  
  <pre><code>var clipByName = function (ctx) {
    this.setCoords();
    var clipObj = findByClipName(this.clipName);
    var scaleXTo1 = (1 / this.scaleX);
    var scaleYTo1 = (1 / this.scaleY);
    ctx.save();
  
    var ctxLeft = -( this.width / 2 ) + clipObj.strokeWidth;
    var ctxTop = -( this.height / 2 ) + clipObj.strokeWidth;
    var ctxWidth = clipObj.width - clipObj.strokeWidth;
    var ctxHeight = clipObj.height - clipObj.strokeWidth;
  
    ctx.translate( ctxLeft, ctxTop );
    ctx.scale(scaleXTo1, scaleYTo1);
    ctx.rotate(degToRad(this.angle * -1));
  
    ctx.beginPath();
  
    var isPolygon = clipObj instanceof fabric.Polygon;
    // polygon cliping area
    if(isPolygon)
    {
        // prepare points of polygon
        var points = [];
        for(i in clipObj.points)
            points.push({
                x: (clipObj.left + clipObj.width / 2) + clipObj.points[i].x - this.oCoords.tl.x,
                y: (clipObj.top + clipObj.height / 2) + clipObj.points[i].y - this.oCoords.tl.y
            });
  
        ctx.moveTo(points[0].x, points[0].y);
        for(i=1; i&lt;points.length; ++i)
        {
          ctx.lineTo(points[i].x, points[i].y);
        }
        ctx.lineTo(points[0].x, points[0].y);
    }
    // rectangle cliping area
    else
    {
        ctx.rect(
            clipObj.left - this.oCoords.tl.x,
            clipObj.top - this.oCoords.tl.y,
            clipObj.width,
            clipObj.height
      );
    }
  
    ctx.closePath();
  
    ctx.restore();
  </code></pre>
  
  <p>}</p>