title: FabricJs: object border grows beyond grid cell
body: <p>Using FabricJS, I am working on a prototype where in objects are drawn with border. Border size is an exposed property which can be changed by user. Canvas has Grid. Objects are drawn within grid cell. My issue is, border goes beyond grid cell. Please see the screenshot<a href="https://i.stack.imgur.com/OV1H5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OV1H5.png" alt="enter image description here"></a></p>
  
  <p>Overridden <code>_render</code> method from fabricJS to decrease object height and width with that of border size. Here is the code..</p>
  
  <pre><code>_render(ctx: CanvasRenderingContext2D, noTransform: boolean) {
          if (this.width === 1 &amp;&amp; this.height === 1) {
              ctx.fillRect(-0.5, -0.5, 1, 1);
              return;
          }
  
          var rx = 5,
              ry = 5,
              //MODIFIED CODE - START
              w = this.width - (this.borderThickness * 2), // 2: Left + Right
              h = this.height - (this.borderThickness * 2),// 2: Top + Bottom
              //w = this.width,
              //h = this.height,
              //MODIFIED CODE - END
              x = noTransform ? this.left : -this.width / 2,
              y = noTransform ? this.top : -this.height / 2,
              isRounded = rx !== 0 || ry !== 0,
              k = 1 - 0.5522847498;
  
          ctx.beginPath();
  
          ctx.moveTo(x + rx, y);
  
          ctx.lineTo(x + w - rx, y);
          isRounded &amp;&amp; ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry);
  
          ctx.lineTo(x + w, y + h - ry);
          isRounded &amp;&amp; ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h);
  
          ctx.lineTo(x + rx, y + h);
          isRounded &amp;&amp; ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry);
  
          ctx.lineTo(x, y + ry);
          isRounded &amp;&amp; ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y);
  
          ctx.closePath();
  
          /**** Render Fill *****/
          //this._renderFill(ctx);
  
          if (!this.fill) {
              return;
          }
  
          ctx.save();
          ctx.fill();
          ctx.restore();
  
          /**** Render Fill *****/
  
  
          //render text
          var textSize = 16;
          var textY = y + (h / 2) + (textSize / 2);
          var textX = x + (w / 2);
  
          ctx.fillStyle = "#010101";
          ctx.font = textSize + "px Arial";
  
          ctx.fillText(this.currentValue.toString(), textX, textY);
  
          this._renderStroke(ctx);
      }
  </code></pre>
  
  <p>But the result is not as expected..
  <a href="https://i.stack.imgur.com/ie4tv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ie4tv.png" alt="enter image description here"></a></p>
  
  <p>What my requirement is, object should not grow more that that of grid cell. If user increases border thickness, object should shrink and accommodate border within grid cell. </p>
  
  <p>Thanks in advance.</p>