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 Triangle while scaling using FabricJS?
In this tutorial, we are going to learn how we can maintain the stroke width of Triangle 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.Triangle({ strokeUniform: Boolean }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our triangle. 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.
Example 1: Default Stroke Scaling Behavior
Let's see a code example that depicts the default appearance of the stroke width of a triangle 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>Select the triangle and try scaling it to see that the stroke width also changes while scaling</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 75,
width: 90,
height: 80,
fill: "#ff878d",
stroke: "#674846",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</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>Select the triangle and try scaling it to see that we have fixed stroke width while scaling</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 75,
width: 90,
height: 80,
fill: "#ff878d",
stroke: "#674846",
strokeWidth: 5,
strokeUniform: true,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Key Points
- By default,
strokeUniformisfalse, meaning stroke width scales with the object - Setting
strokeUniform: truemaintains constant stroke width regardless of scaling - This property is useful when you want consistent visual appearance during transformations
- The stroke will always remain at the exact pixel size specified in
strokeWidth
Conclusion
The strokeUniform property in FabricJS provides precise control over stroke appearance during scaling operations. Use strokeUniform: true when you need consistent stroke width regardless of object transformations.
211 Views
