

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Example 1
Default colour when selectionBackgroundColor property is not used
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 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
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 "skyBlue" colour and hence the selection area appears to be of sky blue 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 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>
- Related Questions & Answers
- How to create a Circle with a background colour using FabricJS?
- How to set the colour of the controlling corners of a Circle using FabricJS?
- How to create a Circle with border colour using FabricJS?
- How to set the background color of selection of Ellipse using FabricJS?
- How to set the color of a selection area on a canvas using FabricJS?
- How to disable the selectability of Circle using FabricJS?
- How to set the border color of a selection area on a canvas using FabricJS?
- How to set the width of a selection area border on a canvas using FabricJS?
- How to set the angle of skew on the X-axis of a Circle using FabricJS?
- How to set the angle of skew on the Y-axis of a Circle using FabricJS?
- How to add dashes to the border of a selection area on a canvas using FabricJS?
- How to change notification background colour in Android?
- How to disable the centered scaling of Circle using FabricJS?
- How to lock the horizontal skewing of Circle using FabricJS?
- How to lock the rotation of a Circle using FabricJS?