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 change selection background color of a canvas circle using Fabric.js?
The Fabric.js Circle class is used to provide the circle shape by using the fabric.Circle object. The Circle object is used to provide the circle shape, and the circle is movable, and it can be stretched according to the requirements. For the stroke, color, width, height, and fill color the Circle is customizable. Comparing to the canvas class the Circle class provides the rich functionality.
The Circle class contains the different properties, but to change the selection background color of a canvas circle can be done using selectionBackgroundColor property. The selectionBackgroundColor property of a Fabric.js class specifies to change the selected background color of a circle.
Syntax
The following is the syntax for the circle object −
fabric.Circle({
radius: number,
: string
});
Parameter
radius − Used to specify radius of the circle
selectionBackgroundColor − Specify the color of the selection background.
Steps
Follow the below-given steps to change the selection background color of a canvas circle using Fabric.js −
Step 1 − Include the Fabric.js library in your HTML file.
Step 2 − Create a new canvas element in your HTML file.
Step 3 − Initialize the canvas element in your JavaScript code.
Step 4 − Create a new Fabric.js Circle Class object and set the selectionBackgroundColor property to the desired circle value.
Step 5 − Add the circle object to the canvas.
Example
Let us see how can we change the selection background color of a canvas circle using the fabric.js
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Changing the Selection background color of a canvas circle</h2>
<p>Please select the circle canvas to see the selection background color</p>
<p>The selectionBackgroundColor is set to violet</p>
<canvas id="selectioncanvas"></canvas>
<script>
var canvas = new fabric.Canvas('selectioncanvas');
var circle2 = new fabric.Circle({
top: 50,
left: 50,
radius: 80,
selectionBackgroundColor: 'violet'
});
canvas.add(circle2);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(650);
</script>
</body>
</html>
This code will create a new canvas circle element with the specified ID, create a new Fabric.js Circle Class object and change the selection background color using the selectionBackgroundColor property and add the circle object to the canvas. The circle will appear on the canvas with a background color.
Example
Let us see another example where we can change the background color selection by using the selectionBackgroundColor property, and dimensions like left, top, fill, radius.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Changing the Selection background color of a canvas circle using Fabric.js</h2>
<p>Please select the circle canvas to see the selection background color</p>
<p>The selectionBackgroundColor is set to yellow</p>
<canvas id="colorcanvas"></canvas>
<script>
// Initiating a canvas instance
var canvas = new fabric.Canvas('colorcanvas');
// Create a instance of fabric.Circle Class
var circle4 = new fabric.Circle({
radius: 60,
fill: 'blue',
left: 50,
top: 50,
selectionBackgroundColor: 'yellow'
});
// Adding the Canvas
canvas.add(circle4);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(450);
</script>
</body>
</html>
This code will create a new canvas circle element with the specified ID and dimensions, create a new Fabric.js Circle Class object and change the selected background color using selectionBackgroundColor method, and add the class object to the canvas. The circle will appear on the canvas with a dimensions as we defined in the example.
Conclusion
In this article, we have demonstrated how to change the selection background color of a canvas circle along with examples. We have seen the two different examples here. In the first example, we used the ‘selectionBackgroundColor’ property for changing background color of selection. For the second example, we used the selectionBackgroundColor’ method and various dimensions parameters like left, top, fill etc., for changing the background color of selection.
336 Views
