Fabric.js Path Stroke Width Property

Fabric.js is a powerful JavaScript library that makes it easy to work with HTML5 canvas element. One of the many features of Fabric.js is its ability to draw and manipulate paths. In this article, we will discuss the stroke width property of Fabric.js paths.

The stroke width property

The stroke width property is used to set the thickness of the stroke used to draw the path. The value of the stroke width property can be set using the strokeWidth attribute of the path object.

var path = new fabric.Path('M 100 100 L 200 200 L 300 100', {
  strokeWidth: 5
});

In the above code snippet, we have created a new path object and set its strokeWidth property to 5. This means that the stroke used to draw the path will be 5 pixels thick.

Changing the stroke width property

The stroke width property can be changed after the path has been created. This can be done by calling the set method of the path object and passing in the new strokeWidth value.

path.set('strokeWidth', 10);

In the above code snippet, we are changing the strokeWidth property of the path object to 10. This will make the stroke 10 pixels thick.

Conclusion

The stroke width property of Fabric.js paths is a useful feature that allows you to control the thickness of the stroke used to draw the path. By changing the strokeWidth attribute, you can make the stroke thicker or thinner as needed.