Fabricjs group inside another group

Question

I have problem with groups in FabricJS. When I add eg. 2 groups inside another group, I can't properly set left and top property for internal groups. Look at my code.

Letter A should be on the top left corner (top: 0, left: 0), and letter B should be below A (top: 50, left: 50).

But in this example letters are on the middle, and when I changing postion of B, position A changing too.

Is it bug in FabricJS?

var canvas = new fabric.Canvas('editorCnvs');

function getCell(contentTxt, fontSize, leftOffset, topOffset) {
        var cellCnt = new fabric.Text(contentTxt, {
            fontSize: fontSize
        });

        var cellGrp = new fabric.Group([cellCnt], {
            height: 50,
            width: 50,
            top: topOffset,
            left: leftOffset
        });

        return cellGrp;
    }
    
    var cellsArray = [];

    //It should be on top left corner
    cellsArray.push(
            getCell('A', 30,
                    0, 0));

        
    cellsArray.push(
            getCell('B', 30,
                    50, 50));

    var rowGrp = new fabric.Group(cellsArray, {
        height: 200,
        width: 200
    });

canvas.add(rowGrp);

Fabricjs group inside another group

2 Answers