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 colour of selection of Textbox using FabricJS?
In this tutorial, we are going to learn how to set the background colour of selection of a Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. We can change an object's dimensions, rotate it or manipulate it when it is actively selected. We can change the background colour of selection of Textbox by using the selectionBackgroundColor property.
Syntax
new fabric.Textbox(text: String, { selectionBackgroundColor : String}: Object)
Parameters
text − This parameter accepts a String which is the text string that we want to display inside our textbox.
options (optional) − This parameter is an Object which provides additional customizations to our textbox. 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 value. The value that is assigned will determine the background colour of the selection.
Example 1
Default colour when selectionBackgroundColor property is not used
Let’s see a code 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 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>Default colour when selectionBackgroundColor property is not used</h2> <p>You can select the textbox to see that the selection area has no colour</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a textbox object var textbox = new fabric.Textbox("Everyone smiles in the same language.", { width: 400, left: 110, top: 70, fill: "violet", strokeWidth: 2, stroke: "blue", textAlign: "center", }); // Add it to the canvas canvas.add(textbox); </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 hexadecimal value “#e0ffff” which is a light cyan colour and hence the selection area appears to be of that 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>Passing selectionBackgroundColor property as key</h2> <p>You can select the textbox to see that the selection area now has a light cyan colour</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a textbox object var textbox = new fabric.Textbox("Everyone smiles in the same language.", { width: 400, left: 110, top: 70, fill: "violet", strokeWidth: 2, stroke: "blue", textAlign: "center", selectionBackgroundColor: "#e0ffff", }); // Add it to the canvas canvas.add(textbox); </script> </body> </html>
125 Views
