Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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>
208 Views
