FrozenHeart FrozenHeart - 1 day ago 7
HTML Question

Line has different strokeWidth when placed on a canvas via group

Why does the following code

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

var line = new fabric.Line([100, 50, 100, 100], {
stroke: 'black',
strokeWidth: 1
});
canvas.add(line);

var groupLine = new fabric.Line([100, 50, 100, 100], {});
var group = new fabric.Group([groupLine], {
top: 50,
left: 200,
stroke: 'black',
strokeWidth: 1
});
canvas.add(group);


results in two lines with different width?

enter image description here

https://jsfiddle.net/pyoq5410/

Both lines have the same
strokeWidth
, the only difference is that one of them is added through a
Group
object.

Answer

It looks that you are applying the stroke to the entire group. Try this:

var groupLine = new fabric.Line([150, 50, 150, 100], {
  stroke: 'black', 
  strokeWidth: 1
});
var group = new fabric.Group([groupLine], {});
Comments