Agfdhyk

Why does the following rect and lines not match up?

The lines are 1px apart, 5px long, starting from (0,0)

The rect is top: 0, left: 0, width: 1, height: 1

Running fiddle

Am I missing something with lines?

The padding you got because of strokeWidth of the Rect object, make it zero, it will work as expected. jsfiddle

DEMO

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



var gridLine = function(at, stroke, canvas, length) {

  var horizontal = [0, at, length, at];

  var vertical = [at, 0, at, length];



  let hLine = new fabric.Line(horizontal, {

    strokeWidth: 0.02,

    stroke,

  });

  let vLine = new fabric.Line(vertical, {

    strokeWidth: 0.02,

    stroke,

  });

  canvas.add(hLine);

  canvas.add(vLine);

}



var showGrid = function(fabric) {

  var count = 5;

  var separationPx = 1;

  for (var i = 0; i < count; i++) {

    gridLine(i * separationPx, "silver", fabric, count);

  }

}



var rect = new fabric.Rect({

  top: 0,

  left: 0,

  width: 1,

  height: 1,

  fill: "red",

  strokeWidth: 0

});



showGrid(canvas);

canvas.add(rect);



canvas.setZoom(50);

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.js"></script>

<canvas id="c" width="300" height="300"></canvas>

There is no problem:

[http://jsfiddle.net/odwg3nsq/]

You could set the padding/margin of the outer container, but in the canvas everything is ok with the rectangle.

I am a beginner to Fabricjs so there might be an easier answer. To me it looks like the "padding" (?) is what causes the problem. Look at the control borders when you select the rectangle, they do align but are bigger than your rectangle is.

I could fix this by setting the rect to (-0.5, -0.5, 1, 1), however I think this is not the best workaround and you should probably try to adjust the padding of your rect.

Hope it helps in a way.

Cheers!

Edit: It's not the padding it's the strokeWidth as Durga pointed out in the comments to the question.