JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
<canvas id="c">
</canvas>

CSS

canvas {
  border: 1px solid #000;
}

JavaScript

let optObj = {
    width: 300,
    height: 300,
    backgroundColor: "rgba(255,255,0,0.5)",
  }
let canvas = new fabric.Canvas('c', optObj);

const stroke = {
  stroke: 'red',
  strokeWidth: 10,
}

const rect1 = new fabric.Rect({
	left: 30,
  top: 30, 
  ...stroke,
  width: 100,
  height: 100,
  fill: 'blue',
  padding: -stroke.strokeWidth,
  //borderColor: '#000',
})

const rect2 = new fabric.Rect({
	left: 130,
  top: 130, 
  ...stroke,
  width: 100,
  height: 100,
  fill: 'green',
  padding: -stroke.strokeWidth,
  //borderColor: '#000',
})

fabric.Object.prototype.padding = -10;

fabric.Object.prototype.drawBordersInGroup = function(ctx, options, styleOverride) {
      styleOverride = styleOverride || {};
      var bbox = fabric.util.sizeAfterTransform(this.width, this.height, options),
          strokeWidth = this.strokeWidth,
          strokeUniform = this.strokeUniform,
          borderScaleFactor = this.borderScaleFactor,
          width =
            bbox.x + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleX) + borderScaleFactor,
          height =
            bbox.y + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleY) + borderScaleFactor;
      ctx.save();
      this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray, null);
      ctx.strokeStyle = styleOverride.borderColor || this.borderColor;
      ctx.strokeRect(
        -width / 2,
        -height / 2,
        width,
        height
      );
      ctx.restore();
      return this;
    };

canvas.add(rect1);
canvas.add(rect2);