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;

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

//drop in replacement for drawBordersInGroup method
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,
    //adds object padding to border scale calculation
    borderScaleFactor = this.borderScaleFactor + this.padding * 2,
    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;
};