Blurrying bug with several lines in a group

Question

Why does adding few more lines to the Group object results in such blurrying effect?

Note that having a single line in a group doesn't result in such behavior. It seems that it reproduces only with several lines.

Here's the code to reproduce the bug (you can try it online here -- https://jsfiddle.net/90tw8mfs/, zoom a little and you'll see what I'm talking about):

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

function addFirstGroup() {
    var firstLine = new fabric.Line([0, 0, 0, 100], {
    strokeLineCap: 'round',
    strokeWidth: 2,
    stroke: '#070B7D'
  });
  var group = new fabric.Group([firstLine], {
    left: 100,
    top: 100
  });
  canvas.add(group);
}

function addSecondGroup() {
    var firstLine = new fabric.Line([0, 0, 0, 100], {
    strokeLineCap: 'round',
    strokeWidth: 2,
    stroke: '#070B7D'
  });
  var secondLine = new fabric.Line([0, 100, 100, 100], {
    strokeLineCap: 'round',
    strokeWidth: 2,
    stroke: '#070B7D'
  });
  var thirdLine = new fabric.Line([100, 100, 100, 0], {
    strokeLineCap: 'round',
    strokeWidth: 2,
    stroke: '#070B7D'
  });
  var group = new fabric.Group([firstLine, secondLine, thirdLine], {
    left: 100,
    top: 300
  });
  canvas.add(group);
}

addFirstGroup();
addSecondGroup();

$('#canvas-wrapper').mousewheel(function(e) {
    if (e.originalEvent.deltaY < 0) {
    var newZoom = canvas.getZoom() + 0.1;
  } else {
    var newZoom = canvas.getZoom() - 0.1;
  }
  canvas.setZoom(newZoom);
});

Why? How can I fix it?

Answer 1

I do not see any blurring, but this does not mean you have no blurring. If you have a high res display (Retina display on macs) you will get blurring as the canvas will be at half the resolution of the display.

This answer will help overcome the blurring caused by high res & Retina displays.

The following image is what I see when I take a screenshot of your fiddle. (Note I have rearranged to fit)

There is no blurring of pixels.

If you zoom in on the canvas you will get some blurring. This is due to bilinear filtering that is applied to all graphics on the page. This works well on images but not so well on graphics such as lines.

This image shows zoom at 175% plus some extra zoom to highlight the blur caused by bilinear filtering

You can also fix the problem by preventing bilinear filtering by setting the CSS rule image-rendering: pixelated; on the elements you wish to not have filtering.

There is currently no reliable way to detect retina displays across browsers. You can check devicePixelRatio to see if the value is 2 but you can not differentiate between retina display (which will have a value of two but no zoom) and a page that is zoomed 200%.

You can use the devicePixelRatio to make the canvas resolution match physical pixel size, but some systems may not handle it very well because off the extra GPU load.