Add Text and lines of grid in group in fabric js canvas

Question

I Followed Below snippet for adding a line into a group.

Now I want to add fabric.Text between the lines of groups.

I try to add text and line as a group but it gets fail.

It gives me an error of coordinates like o.setCoords is not a function

Any help will be helpful.

var canvas = new fabric.Canvas('c');
let gridSize = 15;

$("#addAsGroup").click(() => {
    canvas.clear();
    let separateLines = [];
    for (let i = 0; i < canvas.getWidth() / gridSize; i++) {
        let horizontalLine = new fabric.Line(
            [i * gridSize, 0, i * gridSize, canvas.getWidth()], {
                stroke: '#000'
            });
        let verticalLine = new fabric.Line(
            [0, i * gridSize, canvas.getWidth(), i * gridSize], {
                stroke: '#000'
            });
        separateLines.push(horizontalLine);
        separateLines.push(verticalLine);
    }
    
    // add lines to group
    let group = new fabric.Group(separateLines);
    canvas.add(group);
});

$("#addAsSeparateObjects").click(() => {
    canvas.clear();
    let separateLines = [];
    for (let i = 0; i < canvas.getWidth() / gridSize; i++) {
        let horizontalLine = new fabric.Line(
            [i * gridSize, 0, i * gridSize, canvas.getWidth()], {
                stroke: '#000'
            });
        let verticalLine = new fabric.Line(
            [0, i * gridSize, canvas.getWidth(), i * gridSize], {
                stroke: '#000'
            });
        separateLines.push(horizontalLine);
        separateLines.push(verticalLine);
    }
    separateLines.forEach((line) => {
        canvas.add(line);
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>
<button id="addAsGroup">AddAsGroup</button>
<button id="addAsSeparateObjects">AddAsSeparateObjects</button>

Answer 1

let group = new fabric.Group([...separateLines,text]); create a group with text or directly add to canvas according to your function.

DEMO

var canvas = new fabric.Canvas('c');
let gridSize = 15;
var text = new fabric.Text('Grid',{left:canvas.width/2,top:canvas.height/2})

$("#addAsGroup").click(() => {
    canvas.clear();
    let separateLines = [];
    for (let i = 0; i < canvas.getWidth() / gridSize; i++) {
        let horizontalLine = new fabric.Line(
            [i * gridSize, 0, i * gridSize, canvas.getWidth()], {
                stroke: '#000'
            });
        let verticalLine = new fabric.Line(
            [0, i * gridSize, canvas.getWidth(), i * gridSize], {
                stroke: '#000'
            });
        separateLines.push(horizontalLine);
        separateLines.push(verticalLine);
    }
    
    // add lines to group
    let group = new fabric.Group([...separateLines,text]);
    canvas.add(group);
});

$("#addAsSeparateObjects").click(() => {
    canvas.clear();
    let separateLines = [];
    for (let i = 0; i < canvas.getWidth() / gridSize; i++) {
        let horizontalLine = new fabric.Line(
            [i * gridSize, 0, i * gridSize, canvas.getWidth()], {
                stroke: '#000'
            });
        let verticalLine = new fabric.Line(
            [0, i * gridSize, canvas.getWidth(), i * gridSize], {
                stroke: '#000'
            });
        separateLines.push(horizontalLine);
        separateLines.push(verticalLine);
    }
    separateLines.forEach((line) => {
        canvas.add(line);
    })
    canvas.add(text)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>
<button id="addAsGroup">AddAsGroup</button>
<button id="addAsSeparateObjects">AddAsSeparateObjects</button>