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 add dashed stroke to a Rectangle using FabricJS?
In this tutorial, we are going to learn how to add a dashed stroke to 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 strokeDashArray property allows us to specify a dash pattern for the object's stroke.
Syntax
new fabric.Rect({ strokeDashArray: Array })
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our rectangle. Using this parameter, color, cursor, stroke width and many other properties can be changed, including strokeDashArray.
strokeDashArray Property
The strokeDashArray property accepts an Array that defines the dash pattern. Each value in the array represents alternating dash and gap lengths in pixels. For example:
-
[5, 3]- Creates 5px dashes with 3px gaps -
[10, 5, 2, 5]- Creates a complex pattern: 10px dash, 5px gap, 2px dash, 5px gap
Example 1: Default Stroke Appearance
Let's see a code example that shows the default appearance of a rectangle's stroke without the strokeDashArray property.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Default appearance of rectangle stroke</h2>
<p>Solid stroke without dashed pattern</p>
<canvas id="canvas"></canvas>
<script>
// Create canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(400);
canvas.setHeight(250);
// Create rectangle with solid stroke
var rect = new fabric.Rect({
left: 55,
top: 70,
width: 170,
height: 70,
fill: "#f4f0ec",
stroke: "#2a52be",
strokeWidth: 7
});
// Add to canvas
canvas.add(rect);
</script>
</body>
</html>
Example 2: Adding Dashed Stroke
In this example, we use strokeDashArray: [9, 2] to create a dash pattern with 9px dashes followed by 2px gaps.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Rectangle with dashed stroke</h2>
<p>Using strokeDashArray to create dash pattern</p>
<canvas id="canvas"></canvas>
<script>
// Create canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(400);
canvas.setHeight(250);
// Create rectangle with dashed stroke
var rect = new fabric.Rect({
left: 55,
top: 70,
width: 170,
height: 70,
fill: "#f4f0ec",
stroke: "#2a52be",
strokeWidth: 7,
strokeDashArray: [9, 2]
});
// Add to canvas
canvas.add(rect);
</script>
</body>
</html>
Different Dash Patterns
You can create various dash patterns by modifying the array values:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Multiple dash patterns</h2>
<canvas id="canvas"></canvas>
<script>
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(400);
canvas.setHeight(300);
// Pattern 1: Small dashes
var rect1 = new fabric.Rect({
left: 50, top: 30, width: 120, height: 50,
fill: "transparent", stroke: "#ff6b6b", strokeWidth: 3,
strokeDashArray: [3, 3]
});
// Pattern 2: Long dashes with small gaps
var rect2 = new fabric.Rect({
left: 50, top: 100, width: 120, height: 50,
fill: "transparent", stroke: "#4ecdc4", strokeWidth: 3,
strokeDashArray: [15, 5]
});
// Pattern 3: Complex pattern
var rect3 = new fabric.Rect({
left: 50, top: 170, width: 120, height: 50,
fill: "transparent", stroke: "#45b7d1", strokeWidth: 3,
strokeDashArray: [10, 3, 3, 3]
});
canvas.add(rect1, rect2, rect3);
</script>
</body>
</html>
Conclusion
The strokeDashArray property in FabricJS provides flexible control over creating dashed strokes for rectangles. By adjusting the array values, you can create simple or complex dash patterns to enhance your canvas designs.
835 Views
