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 set the width of stroke of Rectangle using FabricJS?
In this tutorial, we are going to learn how to set the width of stroke of a Rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we will have to create an instance of fabric.Rect class and add it to the canvas.
The strokeWidth property allows us to specify the width of a stroke for an object in pixels.
Syntax
new fabric.Rect({
strokeWidth: Number
});
Parameters
-
strokeWidth ? This property accepts a Number which allows us to specify the width of a stroke for an object in pixels. Its default value is 1.
Example 1: Default Stroke Width
Let's see a code example that depicts the default appearance of the stroke of a rectangle object. Since we have not used the strokeWidth property, the default width of 1 pixel is being rendered.
<!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 an object's stroke</h2>
<p>You can see the default stroke width of 1px around the rectangle.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(400);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 55,
top: 70,
width: 170,
height: 70,
fill: "#f4f0ec",
stroke: "#2a52be"
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Example 2: Custom Stroke Width
In this example, we are passing the strokeWidth property a value of 5. This will make sure that our rectangle object is rendered with a stroke that has a width of 5 pixels.
<!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>Custom stroke width using strokeWidth property</h2>
<p>You can now see that the stroke width is 5px wide around the rectangle.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(400);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 55,
top: 70,
width: 170,
height: 70,
fill: "#f4f0ec",
stroke: "#2a52be",
strokeWidth: 5
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Comparison of Different Stroke Widths
Here's an example showing multiple rectangles with different stroke widths for better visualization:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Comparison of different stroke widths</h2>
<canvas id="canvas"></canvas>
<script>
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(600);
canvas.setHeight(300);
// Rectangle with stroke width 1 (default)
var rect1 = new fabric.Rect({
left: 50, top: 50, width: 80, height: 60,
fill: "#f4f0ec", stroke: "#2a52be", strokeWidth: 1
});
// Rectangle with stroke width 3
var rect2 = new fabric.Rect({
left: 200, top: 50, width: 80, height: 60,
fill: "#f4f0ec", stroke: "#2a52be", strokeWidth: 3
});
// Rectangle with stroke width 8
var rect3 = new fabric.Rect({
left: 350, top: 50, width: 80, height: 60,
fill: "#f4f0ec", stroke: "#2a52be", strokeWidth: 8
});
canvas.add(rect1, rect2, rect3);
</script>
</body>
</html>
Key Points
- The
strokeWidthproperty accepts numeric values representing pixels - Default stroke width is 1 pixel if not specified
- Larger values create thicker borders around the rectangle
- This property works with any stroke color defined by the
strokeproperty
Conclusion
The strokeWidth property in FabricJS provides precise control over rectangle border thickness. Use it to create visual emphasis or match design requirements in your canvas applications.
553 Views
