Fabricjs - wrong bounding box after scaling

by Andrea Bogazzi

HTML

<html>
<body>

<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.js" integrity="sha512-hOJ0mwaJavqi11j0XoBN1PtOJ3ykPdP6lp9n29WVVVVZxgx9LO7kMwyyhaznGJ+kbZrDN1jFZMt2G9bxkOHWFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</body>
</html>

CSS

body, html {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

JavaScript

const canvas = new fabric.Canvas("canvas")
canvas.setWidth(document.body.clientWidth)
canvas.setHeight(document.body.clientHeight)

canvas.on('after:render', () => {
	canvas.contextContainer.strokeStyle = '#555';
  canvas.forEachObject((obj) => {
    var bound = fabric.util.makeBoundingBoxFromPoints(obj.getCoords(false, false))
    canvas.contextContainer.strokeRect(
      bound.left + 0.5,
      bound.top + 0.5,
      bound.width,
      bound.height
    );
  });
});

const word1 = new fabric.Text("Example 1", {
  left: 100,
  top: 100,
  width: 50,
  height: 56,
})

const word2 = new fabric.Text("Example 1", {
  left: 200,
  top: 200,
  width: 50,
  height: 56,
  fill: "red",
})

canvas.add(word1)
canvas.add(word2)

const selection = new fabric.ActiveSelection(canvas.getObjects(), {
  canvas: canvas,
})