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 Rectangle using FabricJS?
In this tutorial, we are going to learn how to set the background colour of selection of a Rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we will have to create an instance of fabric.Rect 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 Rectangle by using the selectionBackgroundColor property.
Syntax
new fabric.Rect({ selectionBackgroundColor: String }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our rectangle. 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 Without Background Color
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 click on the rectangle 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 rectangle object
var rect = new fabric.Rect({
left: 155,
top: 70,
width: 170,
height: 70,
fill: "#00b7eb",
stroke: "#ffa089",
strokeWidth: 5,
padding: 50,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Example 2: Using selectionBackgroundColor Property
In this example, we are assigning a value to the selectionBackgroundColor property. In this case, we have passed it the hexadecimal value "#e0ffff" which is a light cyan colour 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 click on the rectangle to see that the selection area now has a light cyan 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 rectangle object
var rect = new fabric.Rect({
left: 155,
top: 70,
width: 170,
height: 70,
fill: "#00b7eb",
stroke: "#ffa089",
strokeWidth: 5,
padding: 50,
selectionBackgroundColor: "#e0ffff",
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Key Points
- The selectionBackgroundColor property only affects the visual appearance when an object is selected
- It accepts any valid CSS color string including hex codes, RGB values, or named colors
- This property provides better visual feedback to users when interacting with canvas objects
Conclusion
The selectionBackgroundColor property in FabricJS allows you to customize the background color of selected objects. This enhances user experience by providing clear visual feedback when objects are selected on the canvas.
422 Views
