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
How to set the background color of selection of Ellipse using FabricJS?
In this tutorial, we are going to learn how to set the background color of selection of an Ellipse using FabricJS. Ellipse is one of the various shapes provided by FabricJS. In order to create an ellipse, we have to create an instance of fabric.Ellipse class and add it to the canvas. We can change an objects dimensions, rotate it or manipulate it when it is actively selected. We can change the background color of selection of Ellipse by using the selectionBackgroundColor property.
Syntax
new fabric.Ellipse({ selectionBackgroundColor : String }: Object)Parameters
options (optional) − This parameter is an Object which provides additional customizations to our ellipse. Using this parameter color, 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 color of the selection.
Example 1
Default color when selectionBackgroundColor property is not used
Let's take an 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 color.
<!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>How to set the background color of selection of Ellipse using FabricJS?</h2>
<p>Select the object and you will observe that the selection background has no color. Here we have not applied the <b>selectionBackgroundColor</b> property. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
rx: 80,
ry: 50,
fill: "#ff1493",
});
// Adding it to the canvas
canvas.add(ellipse);
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 "darkBlue" color and hence the selection area appears to be of dark blue.
<!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>How to set the background color of selection of Ellipse using FabricJS?</h2>
<p>Select the object and you will observe that the background of the selection appears dark blue. This is because we have set the <b>selectionBackgroundColor</b> as dark blue. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
rx: 80,
ry: 50,
fill: "#ff1493",
selectionBackgroundColor: "darkBlue",
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
173 Views
