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 Circle using FabricJS?
In this tutorial, we are going to learn how to add a dashed stroke to a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will have to create an instance of fabric.Circle 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.Circle({ strokeDashArray: Array })
Parameters
options (optional) ? This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, cursor, and stroke width can be changed related to the object of which strokeDashArray is a property.
strokeDashArray Property
strokeDashArray ? This property accepts an Array that defines the dash pattern. For example, passing [2,3] creates a pattern of 2px dash followed by 3px gap, repeating infinitely.
Example 1: Default Stroke Appearance
Let's see an example that shows the default appearance of a circle's stroke without using strokeDashArray.
<!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 stroke appearance</h2>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "#adff2f",
radius: 50,
stroke: "#228b22",
strokeWidth: 15
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Using strokeDashArray Property
In this example, we pass [9,2] to the strokeDashArray property. This creates a dash pattern with 9px dashes followed by 2px gaps.
<!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>Dashed stroke using strokeDashArray</h2>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "#adff2f",
radius: 50,
stroke: "#228b22",
strokeWidth: 15,
strokeDashArray: [9, 2]
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Different Dash Patterns
You can create various dash patterns by modifying the array values:
strokeDashArray: [5, 5] // Equal dashes and gaps strokeDashArray: [10, 2, 3, 2] // Complex pattern strokeDashArray: [20, 5] // Long dashes with short gaps
Conclusion
The strokeDashArray property in FabricJS allows you to create custom dashed stroke patterns for circles. By passing different array values, you can achieve various visual effects for your circle borders.
378 Views
