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 a selection area border on a canvas using FabricJS?
In this article, we are going to learn how to set the width of a selection area border on a canvas using FabricJS. A selection area indicates the area selected using the mouse and all objects under that area will get selected. FabricJS allows us to adjust the width of the selection area border with the selectionLineWidth property.
Syntax
new fabric.Canvas(element: HTMLElement|String, { selectionLineWidth: Number }: 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 selectionLineWidth is a property. It accepts a number which determines the width of a line used in a selection border. Its default value is 1.
Example 1: Basic selectionLineWidth Usage
Let's see a code example of how we can set the width of a selection area border in canvas using FabricJS. The selectionLineWidth parameter accepts a number as a value. The greater the number we set it to, the wider the border of the canvas area will be.
<!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>Setting the width of the selection area border in canvas using FabricJs</h2>
<p>Select an area around the object to see the width of the selection area border.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionLineWidth: 23,
});
// Creating an instance of the fabric.Rect class
var rect = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#006400",
angle: 90,
});
// Adding it to the canvas
canvas.add(rect);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Combining with Selection Colors
We can combine the selectionLineWidth parameter with other parameters like selectionColor and selectionBorderColor properties which allow us to set the color of a selected area and adjust the border-color of that selected area 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>Setting the width of selection area border in canvas using Fabric</h2>
<p>Select an area around the object to see the selection color and selection border color.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionLineWidth: 3,
selectionColor: "rgba(42,82,190,0.3)",
selectionBorderColor: "black",
});
// Creating an instance of the fabric.Rect class
var rect = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#006400",
angle: 90,
});
// Adding it to the canvas
canvas.add(rect);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Properties
| Property | Description | Default Value |
|---|---|---|
selectionLineWidth |
Width of selection area border | 1 |
selectionColor |
Fill color of selection area | rgba(100,100,255,0.3) |
selectionBorderColor |
Border color of selection area | rgba(255,255,255,0.3) |
Conclusion
The selectionLineWidth property in FabricJS provides an easy way to customize the thickness of selection borders. Combined with color properties, it offers complete control over the visual appearance of object selection in canvas applications.
844 Views
