Since Upgrading Fabric.js Unable To Draw Lines In Group

Since updating fabric.js library we've been unable to draw lines into a group and then add them onto the canvas. I've created 2 identical fiddles with different versions of fabirc

Solution 1:

your group does not have dimensions. You have to collect the lines in an array and then create a group for it.

var gridLayer = null; 
var gridSize = 10;

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

var addGridLayer = function() {
  if (gridLayer) {
    canvas.remove(gridLayer);
  }

  gridLayer = [];    
  // Grid
    var workarea = {
      left: 0,
      top: 0,
      right: 400,
      bottom: 400
    };
    var gridStep = gridSize / 2;

    var lineOption = {stroke: 'rgba(0,0,0,.1)', strokeWidth: 1, selectable:false};

    var deltaX = workarea.left - parseInt(workarea.left/gridStep) * gridStep;
    var deltaY = workarea.top - parseInt(workarea.top/gridStep) * gridStep;
    function max(x,y) { return x > y ? x : y }

    var rect = {
      left: 0,
      top: 0,
      right: 400,
      bottom: 400
    };

    for (var xIdx = 0; xIdx < 2 + (canvas.getWidth() / gridStep); xIdx ++) {
      var x = xIdx * gridStep + deltaX;
      if (x < rect.left || x > rect.right) {
        continue;
      }
      var line = new fabric.Line([x, rect.top, x, rect.bottom], lineOption);
      gridLayer.push(line);
    }
    for (var yIdx = 0; yIdx < 2 + (canvas.getHeight() / gridStep); yIdx ++) {
      var y = yIdx * gridStep + deltaY;
      if (y < rect.top || y > rect.bottom) {
        continue;
      }
      var line = new fabric.Line([rect.left, y, rect.right, y], lineOption);
      gridLayer.push(line);
    }
    var gridLayerGroup = new fabric.Group(gridLayer, {left: 0, top: 0, originX: 'left', originY: 'top', selectable:false});

  canvas.add(gridLayerGroup);
}

addGridLayer();

canvas.renderAll();