Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
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
Set Fill Colour of Text in Textbox using Fabric.js
In this tutorial, we are going to learn how we can change the appearance of a Textbox object by changing the fill colour of its text 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 the fill colour by using the fill property which allows us to specify the colour of the text in the Textbox.
Syntax
new fabric.Textbox(text: String, { fill: 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 fill is a property.
Options Keys
fill ? This property accepts a String which allows us to change a text's fill colour. Its default value is rgb(0,0,0) which is the colour "black".
Example 1
Default fill colour of a textbox object
Let's see a code example that shows us the default fill colour of text in a textbox object in FabricJS. If we completely skip the fill property while creating a textbox object, it will be rendered with the fill colour as black.
<!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 fill colour of a textbox object</h2> <p>You can see that the default fill colour of text in textbox is black</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("Every champion was once a contender who refused to give up.", { backgroundColor: "#e3dac9", width: 400, top: 70, left: 70, }); // Add it to the canvas canvas.add(textbox); </script> </body> </html>
Example 2
Passing the fill property as key
We can also assign the fill property any colour name or RGBA value. In this example, we have assigned it a value of "green" which thus changes the fill colour accordingly.
<!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 the fill property as key</h2> <p>You can see that the fill colour of text in textbox has changed</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("Every champion was once a contender who refused to give up.", { backgroundColor: "#e3dac9", width: 400, top: 70, left: 70, fill: "green", }); // Add it to the canvas canvas.add(textbox); </script> </body> </html>
1K+ Views
