Fabric.js: dashed line with clipping looks different on large canvas size

I use a clipping area with fabric.js to create a graph. However, the grid lines look different on a canvas size bigger than about 1000px. It only occurs with imageSmoothingEnabled: false. See the image. Note: the size of the frames have nothing to do with the size of the canvas.

To create the grid lines, I create one original that is wider than the area, and then clone them. The cloned lines are added to the clipArea object. Here is the relevant code.

HTML:

<canvas id="canvas" width="966" height="520"></canvas>

Javascript:

var canvas = new fabric.StaticCanvas('canvas', {
    imageSmoothingEnabled: false
});

var rect = new fabric.Rect({
    originX: 'left',
    originY: 'top',
    fill: 'transparent',
    width: x1-x0,
    height: y1-y0
});

var clipArea = new fabric.Group([rect], {
    originX:  'left', 
    originY: 'top',
    width: canvas.width*2,
    height: canvas.height*2,
    left: -canvas.width,            
    top: -canvas.height
});     
rect=clipArea.item(0)
rect.set({left: x0,top: y0});
clipArea.clipPath = rect;   
canvas.add(clipArea);

var yline = new fabric.Line([0, 0, 1200, 0], {
    originX: 'left',
    originY: 'center',
    stroke: myFrameColor,
    strokeWidth: 2,     
    strokeDashArray: [1, 3.4]       
});

// clipArea.add(yline)

Of course I could draw the gridlines in a different way without using clipping, but I need a clipping area anyway. And I'd like to understand why this is happening.