Fabric.js strokeWidth Property

The strokeWidth property in Fabric.js is used to specify the width of the stroke (outline) of an object. It determines the thickness of the line used to draw the stroke. This property is applicable to objects like rectangles, circles, polygons, lines, and more.

Usage

To set the strokeWidth property, you can use the following code:

// Create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 100,
  fill: 'red',
  strokeWidth: 2 // Set the stroke width to 2 pixels
});

// Add the rectangle to the canvas
canvas.add(rect);

In the above example, we create a rectangle object and set its strokeWidth property to 2 pixels. This will result in a thin red stroke around the rectangle.

Default Value

The default value of the strokeWidth property is 1. If you do not specify a custom value, the stroke will have a width of 1 pixel.

Changing Stroke Width

You can change the strokeWidth property of an existing object using the set() method. Here's an example:

// Get the first object on the canvas
var object = canvas.item(0);

// Change the stroke width of the object to 4 pixels
object.set('strokeWidth', 4);

// Apply the changes to the canvas
canvas.renderAll();

In the above code snippet, we retrieve the first object on the canvas and change its strokeWidth property to 4 pixels. Remember to call the renderAll() method to apply the changes to the canvas.

Conclusion

The strokeWidth property in Fabric.js allows you to control the width of the stroke for objects drawn on the canvas. With this property, you can create different stroke thicknesses, enhancing the visual appearance of your canvas-based applications.