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 dashes to the border of a selection area on a canvas using FabricJS?
In this article, we are going to learn how to add dashes to the border of a selection area on a canvas using FabricJS. We can achieve this by using the selectionDashArray property. It allows us to make the border of a selection area dashed.
Syntax
new fabric.Canvas(element: HTMLElement|String, { selectionDashArray: Array }: Object)
Parameters
-
element ? This parameter is the <canvas> element itself which can be derived using document.getElementById() or the id of the <canvas> element itself. The FabricJS canvas will be initialized on this element.
-
options (optional) ? This parameter is an Object which provides additional customizations to our canvas. Using this parameter color, cursor, border width and a lot of other properties can be changed related to the canvas, of which selectionDashArray is a property. It accepts an array which determines the dash pattern that we want.
Example 1: Basic Dashed Selection Border
selectionDashArray allows us to make the border of a selection area dashed. The way to define a dash pattern is by specifying the length of dashes in an array. In the example below we have taken a [7,6] array. This means, there would be a 7px long line followed by a 6px gap and so on.
<!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>Adding dashes to the border of a selection area on a canvas</h2>
<p>Select an area around the object. The border of the selection area would have dashed lines.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionDashArray: [7, 6],
selectionBorderColor: "red"
});
// Creating an instance of the fabric.Circle class
var circle = new fabric.Circle({
left: 200,
top: 100,
radius: 40,
fill: "blue",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Combining with Line Width and Border Color
The selectionDashArray property can be used in combination with selectionLineWidth and selectionBorderColor which specify the width of the border of a selection and the color of the border of the selection, respectively.
<!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>Adding dashes to the border of a selection area on a canvas</h2>
<p>Select an area around the object and observe the outline of the selection area.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionDashArray: [13, 16],
selectionLineWidth: 5,
selectionBorderColor: "green",
});
// Creating an instance of the fabric.Circle class
var circle = new fabric.Circle({
left: 200,
top: 100,
radius: 40,
fill: "blue",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
How It Works
The selectionDashArray property accepts an array of numbers that define the dash pattern. Each pair of values represents the length of a dash and the length of a gap:
-
[7, 6]creates 7px dashes with 6px gaps -
[13, 16]creates 13px dashes with 16px gaps -
[5, 5, 10, 5]creates alternating patterns: 5px dash, 5px gap, 10px dash, 5px gap
Conclusion
The selectionDashArray property provides an easy way to customize the selection border appearance in FabricJS. Combine it with selectionBorderColor and selectionLineWidth for complete control over the selection area styling.
544 Views
