I'm working with Fabric.js (v5.3.0) in a Vue3 project and having trouble understanding nested group positioning. Here's my simplified setup:

  const rect1 = new fabric.Rect({
    width: 60,
    height: 60,
    left: 0,
    top: 0,
    originX: "left",
    fill: `red`,
  });

  const rect2 = new fabric.Rect({
    left: 65,
    top: 0,
    width: 60,
    height: 60,
    originX: "left",
    originY: "top",
    fill: `blue`,
  });

  const rect3 = new fabric.Rect({
    width: 60,
    height: 60,
    left: 60,
    top: 0,
    originX: "left",
    originY: "top",
    fill: `green`,
  });

  const rect4 = new fabric.Rect({
    left: 60,
    top: 60,
    width: 60,
    height: 60,
    originX: "left",
    originY: "top",
    fill: `yellow`,
  });

  const rect5 = new fabric.Rect({
    left: 150,
    top: 60,
    width: 60,
    height: 60,
    originX: "left",
    originY: "top",
    fill: `purple`,
  });

  const group1 = new fabric.Group([rect1, rect2], {
    left: 60,
    top: 60,
    originX: "left",
    originY: "top",
  });

  const group2 = new fabric.Group([rect3, rect4], {
    left: 60,
    top: 120,
    originX: "left",
    originY: "top",
  });

  const group3 = new fabric.Group([group1, group2, rect5], {
    left: 10,
    top: 10,
    originX: "left",
    originY: "top",
  });

canvasRef.value?.add(group3);

Environment :

• Vue 3.4.19
• Fabric.js 5.3.0
• Chrome 126

Console Print:

group3.getCenterPoint

Point {x: 343, y: 100.5} 'group3.getCenterPoint()'

group1 klass

What I expect :

I want to understand how the coordinates of group1 are calculated.