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 border color of a selection area on a canvas using FabricJS?
In this article, we are going to learn how to set the border color of a selection area on a canvas using FabricJS. A selection indicates whether a group selection should be enabled or not. FabricJS allows us to adjust the border color accordingly with the selectionBorderColor property.
Syntax
new fabric.Canvas(element: HTMLElement|String, {
selectionBorderColor: String
}: 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, properties such as color, cursor, border width and a lot of other properties can be changed related to the canvas, of which selectionBorderColor is a property with which we can use to indicate the color of the border of the selection. The default value of the selectionBorderColor property is rgba(255,255,255,0.3).
Example 1: Using Color Name
The selectionBorderColor property accepts a String which determines the color of the border of the selection. The color is usually darker than the color of the selection itself. Let's see a code example of how we can set the border color of a selection area in canvas using FabricJS.
<!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 border color of a selection area on a canvas</h2>
<p>Select an area around the object. You will notice that the border color of the selection would be green in color.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionBorderColor: "green",
});
// 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: Using RGBA Value
We can also use an "rgba" value where "a" stands for "alpha" that denotes the opacity. In this example, we have used maroon color which has an "rgba" value of (112,0,0) and 0.9 denotes the opacity.
<!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 border colour of selection area using FabricJs</h2>
<p>Select an area around the object to see the border color of the selection area. Here we have used "rgba" value to set the border color of the selection area.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionBorderColor: "rgba(112,0,0,0.9)",
});
// 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 Points
- The
selectionBorderColorproperty controls the border color when selecting objects on the canvas - It accepts color values in various formats: color names, hex codes, RGB, and RGBA
- The default value is
rgba(255,255,255,0.3)(semi-transparent white) - RGBA values allow you to control both color and opacity for better visual feedback
Conclusion
The selectionBorderColor property in FabricJS provides an easy way to customize the visual appearance of selection borders on canvas objects. You can use standard color names or RGBA values for precise color and opacity control.
924 Views
