Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to maintain stroke width of a Rectangle while scaling using FabricJS?
In this tutorial, we are going to learn how we can maintain the stroke width of Rectangle while scaling using FabricJS. By default, the stroke width increases or decreases with respect to the object's scale values. However, we can disable this behaviour by using the strokeUniform property.
Syntax
new fabric.Rect({ strokeUniform: Boolean }: Object)
Parameters
Options (optional) ? This parameter is an Object which provides additional customizations to our rectangle. Using this parameter, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the object of which strokeUniform is a property.
Options Keys
strokeUniform ? This property accepts a Boolean value which allows us to specify whether the stroke width will be scaled along with the object or not. Its default value is false.
How It Works
When strokeUniform is set to false (default), the stroke scales proportionally with the object. When set to true, the stroke maintains its original pixel width regardless of scaling, creating a uniform appearance.
Example 1: Default Behavior (strokeUniform: false)
Let's see a code example that depicts the default appearance of the stroke width of a rectangle object that is being scaled. Since we have not used the strokeUniform property, the stroke width will also get affected by the object's scaling.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Default appearance of stroke width while scaling the object</h2>
<p>Try scaling the object in order to see the default behaviour</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 55,
top: 90,
width: 170,
height: 70,
fill: "#ccccff",
padding: 9,
stroke: "#483d8b",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Example 2: Using strokeUniform Property
In this example, we are passing the strokeUniform property as key with true as value. Therefore, the object's stroke will no longer increase or decrease with respect to the object's scaling and this will ensure that the stroke always matches the exact pixel size entered for stroke width.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Passing strokeUniform property as key</h2>
<p>Try scaling the object in order to see that the stroke keeps a uniform width</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 55,
top: 90,
width: 170,
height: 70,
fill: "#ccccff",
padding: 9,
stroke: "#483d8b",
strokeWidth: 5,
strokeUniform: true,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Comparison
| Property Value | Stroke Behavior | Use Case |
|---|---|---|
strokeUniform: false |
Stroke scales with object | Proportional scaling needed |
strokeUniform: true |
Stroke maintains fixed width | Consistent line weight required |
Conclusion
The strokeUniform property provides control over stroke scaling behavior in FabricJS rectangles. Set it to true to maintain consistent stroke width regardless of object scaling, which is particularly useful for maintaining visual consistency in interactive graphics applications.
319 Views
