Adding fabric.js Lines to group - fabricjs

Question

How do I add lines to group in fabric.js? It seems as if each line top and left property is set to 0, and because of that final size of grid is 0 as well.
Code of adding to group:
let group = new fabric.Group();
for (let i = 0; i < canvas.getWidth() / gridSize; i++) {
let horizontalLine = new fabric.Line(
[i * gridSize, 0, i * gridSize, canvas.getWidth()]
);
let verticalLine = new fabric.Line(
[0, i * gridSize, canvas.getWidth(), i * gridSize]
);
group.add(horizontalLine, verticalLine);
}
canvas.add(group);
Self-explaining fiddler

Answer 1

That could be accomplished in the following way ...
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>