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 background colour of selection of a Triangle using FabricJS?
In this tutorial, we are going to learn how to set the background colour of selection of a Triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of fabric.Triangle class and add it to the canvas.
We can change an object's dimensions, rotate it or manipulate it when it is actively selected. We can change the background colour of selection of triangle by using the selectionBackgroundColor property.
Syntax
new fabric.Triangle({ selectionBackgroundColor : String }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our triangle. Using this parameter, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the object of which selectionBackgroundColor is a property.
Options Keys
-
selectionBackgroundColor ? This property accepts a String value. The value that is assigned will determine the background colour of the selection.
Example 1: Default Selection Appearance
Default colour when selectionBackgroundColor property is not used
Let's see a code example to understand how the selection appears when the selectionBackgroundColor property is not used. As we can see from this example, the selection area or the area behind the object has no colour.
<!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 colour when selectionBackgroundColor property is not used</h2>
<p>You can select the triangle to see that the selection area has no colour.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 180,
top: 70,
width: 90,
height: 80,
fill: "#228b22",
stroke: "#d8e4bc",
strokeWidth: 7,
padding: 30,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Using selectionBackgroundColor Property
Passing selectionBackgroundColor property as key
In this example, we are assigning a value to the selectionBackgroundColor property. In this case, we have passed it the hexadecimal value "#da70d6" which is the colour magenta and hence the selection area appears to be of that colour.
<!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>Passing selectionBackgroundColor property as key</h2>
<p>You can select the triangle to see that the selection area now has a magenta colour</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 180,
top: 70,
width: 90,
height: 80,
fill: "#228b22",
stroke: "#d8e4bc",
strokeWidth: 7,
padding: 30,
selectionBackgroundColor: "#da70d6",
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Common Use Cases
The selectionBackgroundColor property is useful for:
- Creating visual contrast to better highlight selected objects
- Improving user experience with clear selection indication
- Matching your application's color theme or branding
Conclusion
The selectionBackgroundColor property in FabricJS allows you to customize the background color that appears when a triangle is selected. Use color values like hex codes, RGB, or named colors to enhance visual feedback for selected objects.
229 Views
