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 Ellipse while scaling using FabricJS?
In this tutorial, we are going to learn how we can maintain the stroke width of Ellipse 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.Ellipse({ strokeUniform: Boolean }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our ellipse. Using this parameter color, 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
The following example depicts the default appearance of the stroke width of an ellipse 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>How to maintain stroke width of Ellipse while scaling using FabricJS?</h2>
<p>Select the object and stretch it horizontally or vertically. Here the stroke width will get affected while scaling the object up or down. This is the default behavior. Here we have not used the <b>strokeUniform</b> property.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 215,
top: 100,
fill: "blue",
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 15,
});
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Using strokeUniform Property
In this example, we are passing the strokeUniform property as key with a true value. Therefore, the object's stroke will no longer increase or decrease with respect to the object's scaling. The stroke will always maintain its exact pixel size regardless of how much the ellipse is scaled.
<!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>Maintaining the stroke width of an Ellipse while scaling using FabricJS</h2>
<p>Select the object and stretch it in any direction. Here the stroke width of the ellipse will remain unaffected at the time of scaling up because we have applied the <b>strokeUniform</b> property.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 215,
top: 100,
fill: "blue",
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 15,
strokeUniform: true,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Differences
| Property Value | Stroke Behavior | Use Case |
|---|---|---|
strokeUniform: false (default) |
Stroke scales with object | When you want proportional scaling |
strokeUniform: true |
Stroke maintains fixed width | When you want consistent stroke appearance |
Conclusion
The strokeUniform property gives you control over stroke scaling behavior in FabricJS ellipses. Set it to true to maintain consistent stroke width regardless of object scaling.
555 Views
