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
FabricJS to setting the Background Colour on Selection of Circle
In this tutorial, we are going to learn how to set the background colour of selection of a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we have to create an instance of fabric.Circle class and add it to the canvas. We can change an object's dimensions, rotate it or manipulate it when the circle is actively selected. We can change the background colour of selection of Circle by using the selectionBackgroundColor property.
Syntax
new fabric.Circle({ selectionBackgroundColor: String }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our circle. 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 which determines the background colour of the selection area when an object is selected.
Example 1: Default Selection Appearance
Let's see a code 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 background 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>Setting the Background Colour on selection of circle</h2>
<p>Select the object and notice the selection area. Here we have not used the <b>selectionBackgroundColor</b> property.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#85bb65"
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Using selectionBackgroundColor Property
In this example, we are assigning a value to the selectionBackgroundColor property. We have passed it the "skyBlue" colour and hence the selection area appears with a sky blue background when the circle is selected.
<!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 Background Colour on selection of circle</h2>
<p>Select the object to see the background color of the selection area. Here we have used the <b>selectionBackgroundColor</b> property and assigned it 'skyBlue' color.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#85bb65",
selectionBackgroundColor: "skyBlue"
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
-
The selectionBackgroundColor property only affects the appearance when an object is actively selected.
-
You can use any valid CSS color value including hex codes, RGB values, or named colors like "red", "blue", etc.
-
This property enhances the visual feedback when users interact with objects on the canvas.
Conclusion
The selectionBackgroundColor property in FabricJS provides a simple way to customize the visual appearance of selected objects. By setting this property, you can improve user experience by providing clear visual feedback during object selection and manipulation.
385 Views
