rotation - fabricjs Dynamically set boundingbox

Question

I have a polygon (right angle triangle) inside a group. When I rotate the polygon by like 20 degrees the group's bounding box is not what I want. I want to remove the extra space on the right side (see attached

const points = [
  {
    "x": 0,
    "y": 0
  },
  {
    "x": 100,
    "y": 100
  },
  {
    "x": 0,
    "y": 100
  },
  {
    "x": 0,
    "y": 0
  }
]
const poly  = new fabric.Polygon(points);
poly.set({
    originX: "center",
  originY: "center",
    top: 150,
  left: 150,
  fill: "green"
})


var canvas = new fabric.Canvas("c");

var group = new fabric.Group();

window.group = group;
window.poly = poly;

canvas.add(group);
group.addWithUpdate(poly);
canvas.setActiveObject(group);
canvas.renderAll();

function rotate() {
  const shape = group.item(0);
  shape.set({
    angle: shape.angle + 20
  });
  group.addWithUpdate();
  group.setCoords();
  canvas.renderAll();
}

document.getElementById("rotate").addEventListener("click", rotate);

canvas {
  border: 1px solid red;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="250" height="250"></canvas>

<button id="rotate">rotate</button>

question from:https://stackoverflow.com/questions/65943895/fabricjs-dynamically-set-boundingbox

Answer 1

Waitting for answers