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

Share Improve this question Follow edited Aug 8, 2017 at 9:35 Vadim Kotov 8,28488 gold badges5050 silver badges6363 bronze badges asked Nov 19, 2015 at 19:28 Honchar DenysHonchar Denys 1,51844 gold badges2929 silver badges5858 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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.