stroke inside 、stroke outside、stroke center

[zhe-he]

simple demo

Complete demo

[ShaMan123]

very cool and super useful feature

[vshepel]

@zhe-he Thanks for your snippet, very helpful for me. Also, do you know how to keep the original width/height of the rectangle? Because right now, if a 100x100px rectangle has a 10px stroke, it is drawn 110x110px

[zhe-he]

@vshepel
Here is the complete version.
Complete demo

[zhe-he]

Fabric currently defaults to a center stroke side for outlines which is not configurable, and the calculation of an object's bounds includes the stroke width. To support different types of stroke side, it would be necessary to override Fabric's method for calculating an object's bounds, such that the bounds do not include the stroke width. Currently, Fabric draws strokes and fills simultaneously; to support different stroke side types, they would need to be drawn separately. The complete example includes detailed code.

[ixover]

Perfect, Super useful feature thank you

[mauricekindermann]

Cool idea, I just ran into this same problem with clipPath. If only it could trace any shape's border, and didn't distore on resize. Like @zhe-he said you'd really want to bake this into fabric to work as a naive feature, so you could set something like a strokePosition.