Stack Exchange
Fabric.js Padding of objects in group is reset
Version
4.2.0
Test Case
https://jsfiddle.net/dellvolk/c8zas7th/12/
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);

Expected Behavior
I need that when objects form group padding remained. I don't need to set a padding for the group. Only for elements in this group. That the stroke of the group remained as it is, and the black stroke of the elements of the group was like the padding of the elements themselves
Actual Behavior
Padding in objects is -10, but when they form group, the padding changes to 0



The method that handles the border size calculation for objects in a group is drawBordersInGroup (see http://fabricjs.com/docs/fabric.Object.html#drawBordersInGroup).
The following should work as a drop-in replacement for this method in order to factor padding into the size calculation:
https://jsfiddle.net/melchiar/bw384o2n/
//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;
};

