Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the fill colour of text in Textbox using FabricJS?
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
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: Using the Fill Property
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>
Common Fill Color Formats
The fill property accepts various color formats:
- Color names: "red", "blue", "green", "orange"
- Hex values: "#ff0000", "#00ff00", "#0000ff"
- RGB values: "rgb(255, 0, 0)", "rgb(0, 255, 0)"
- RGBA values: "rgba(255, 0, 0, 0.5)" for transparency
Conclusion
The fill property in FabricJS provides an easy way to customize the text color in Textbox objects. You can use color names, hex codes, RGB, or RGBA values to achieve the desired visual appearance for your text elements.
2K+ Views
