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 change the font weight of a Textbox using FabricJS?
In this tutorial, we are going to see how to change the font weight 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. Font weight refers to the value which determines how bold or light our text will appear.
Syntax
new fabric.Textbox(text: String, { fontWeight: Number|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 fontWeight is a property.
Options Keys
-
fontWeight ? This property accepts a Number or String value which determines how bold or light our text shall appear inside the textbox. Its default value is normal.
Font Weight Values
The fontWeight property accepts several values:
| Numeric Value | String Value | Description |
|---|---|---|
| 100 | "lighter" | Thin/Extra Light |
| 400 | "normal" | Normal/Regular |
| 700 | "bold" | Bold |
| 900 | "bolder" | Extra Bold/Black |
Example 1
Passing the fontWeight property as key with a numerical value
Let's see a code example to understand how our textbox object would appear when the fontWeight property is used as key with a numerical value. In this case we have set the value as 400 which means that our text will have normal font. We can also use other values such as 600 or 800.
<!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 fontWeight property as key with a numerical value</h2>
<p>You can see that the text is of normal font</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("Solitary trees, if they grow at all, grow strong.", {
backgroundColor: "#fff8dc",
width: 400,
left: 50,
top: 70,
fill: "#cf3476",
fontWeight: 400,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Example 2
Passing the fontWeight property as key with the value as "bold"
In this example, we are passing the fontWeight property as key, with a value as "bold". This means that our textbox object will be rendered with text that has thicker letters.
<!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 fontWeight property as key with the value as "bold"</h2>
<p>You can see that the textbox object has been rendered with bold text</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("Solitary trees, if they grow at all, grow strong", {
backgroundColor: "#fff8dc",
width: 400,
left: 50,
top: 70,
fill: "#cf3476",
fontWeight: "bold",
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Key Points
- The
fontWeightproperty accepts both numeric values (100-900) and string values ("normal", "bold", etc.) - Numeric values provide more precise control over font thickness
- String values offer common presets for quick styling
- The default value is "normal" (equivalent to 400)
Conclusion
The fontWeight property in FabricJS provides flexible control over text thickness in textboxes. You can use either numeric values for precision or string values for common font weights, allowing you to create visually appealing text displays in your canvas applications.
606 Views
