In Fabric.js, scaling an object tyipcally scales all its visual properties, including its border (stroke) width. This behavior can be undesirable when you need to maintain a consistent border thickness regardless of the object's size. The library provides the strokeUniform property to control this.

Set the strokeUniform property to true on an object to decouple its stroke width from its scale transformations. When the object is scaled, the stroke will retain the pixel width defined by strokeWidth.

const canvasElement = document.getElementById('canvas');
const fabricCanvas = new fabric.Canvas(canvasElement);

const rectangle = new fabric.Rect({
  left: 100,
  top: 100,
  width: 150,
  height: 100,
  fill: 'lightblue',
  stroke: 'navy',
  strokeWidth: 8,
  strokeUniform: true // Border width remains fixed during scaling
});

fabricCanvas.add(rectangle);

In this example, the rectangle's border is initially 8 pixels wide. Scaling the rectangle up or down will not change this border width; it will stay at 8 pixels.

The default value of strokeUniform is false. When left as false, the stroke width scales proportionally with the object, becoming thicker when enlarged and thinner when shrunk.

Limitation with Text Objects

A notable limitation is that the strokeUniform property does not affect fabric.Text objects or its subclasses like fabric.Textbox. For text elements, the stroke width will always scale with the object.

const sampleText = new fabric.Text('Sample Text', {
  left: 50,
  top: 50,
  fontSize: 40,
  fill: 'coral',
  stroke: 'darkred',
  strokeWidth: 3,
  strokeUniform: true // This setting has no effect on text objects
});

fabricCanvas.add(sampleText);
// Scaling this text will also scale its stroke width.