I have an algorithm which is rendering an object with width and height. But when I use setWidth() that object doesn't actually get that width, it somehow gets something like x2 of the width I gave it. Check the code below:

    var width = canvas.getWidth();
    obj.setWidth(width);
    obj.setCoords();
    console.log(obj.getWidth());
    console.log(obj.width);

First log has wrong width "x2" and the second log has the correct width.

I have an algorithm which is rendering an object with width and height. But when I use setWidth() that object doesn't actually get that width, it somehow gets something like x2 of the width I gave it. Check the code below:

    var width = canvas.getWidth();
    obj.setWidth(width);
    obj.setCoords();
    console.log(obj.getWidth());
    console.log(obj.width);

First log has wrong width "x2" and the second log has the correct width.

• javascript
• html5-canvas
• fabricjs

• Is the object a circle? You could be passing it a radius. – Jack Guy Commented Nov 19, 2015 at 19:31
• object is group actually. – Honchar Denys Commented Nov 19, 2015 at 19:50

1 Answer 1

I've struggled with similar stuff, and so I've tested (with fabricjs 1.6.2) and found out that for fabric.Rect rect.width is not equal to rect.getWidth()

rect.width gives the width not considering the rect's strokeWidth

rect.getWidth() considers the rect's strokeWidth

Also remember that the stroke is painted by default half inside the object's edge and half outside of it, thus for example strokeWidth of 10 enlarges the rect's perceived size by 5 + 5 = 10 pixels.

Hope this helps.