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 create a Textbox with background colour using FabricJS?
In this tutorial, we are going to create a Textbox with background colour using FabricJS. We can customize, stretch or move around the text written in a textbox. We can also customize the text itself by using properties like fontSize, fontFamily, fontStyle, fontWeight etc. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. The backgroundColor property allows us to assign a colour to our object's background and it is rectangular in shape for the textbox.
Syntax
new fabric.Textbox(text: String, { backgroundColor: 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 Textbox of which backgroundColor is a property.
Options Keys
-
backgroundColor ? This property accepts a String value which determines the background colour.
Example 1: Using Hexadecimal Color Value
Let's see a code example to assign a background colour to our Textbox object using hexadecimal value of colour. In this example we have used the hex colour code "#ffe4e1" which is a very light shade of red.
<!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 backgroundColor property as key with a hexadecimal value</h2>
<p>You can see that the background colour is a very light shade of red.</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("Details matter, it's worth waiting to get it right.", {
backgroundColor: "#ffe4e1",
width: 400,
top: 70,
left: 110,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Example 2: Using RGBA Color Value
We can use an RGBA value, instead of a hexadecimal colour code, which stands for ? red, green, blue and alpha. The alpha parameter specifies the opacity of a colour. In this example, we have used the rgba value (0,206,209,0.4) which is the colour dark turquoise with 0.4 opacity.
<!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 backgroundColor property as key with an RGBA value</h2>
<p>You can see that the background colour is a dark turquoise colour with 0.4 opacity.</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("Details matter, it's worth waiting to get it right.", {
backgroundColor: "rgba(0,206,209, 0.4)",
width: 400,
top: 70,
left: 110,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Additional Color Formats
FabricJS also supports standard CSS color names for the backgroundColor property. You can use names like "red", "blue", "green", or "transparent" for quick styling without remembering hex codes.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(500);
canvas.setHeight(250);
var textbox = new fabric.Textbox("Using CSS color names", {
backgroundColor: "lightblue",
width: 300,
top: 50,
left: 100,
});
canvas.add(textbox);
</script>
</body>
</html>
Conclusion
The backgroundColor property in FabricJS Textbox accepts various color formats including hexadecimal, RGBA, and CSS color names. This flexibility allows you to create visually appealing text elements with customized backgrounds for your canvas applications.
570 Views
