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 Text using FabricJS?
In this tutorial, we are going to see how to change the font weight of Text using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. Font weight refers to the value which determines how bold or light our text will appear.
Syntax
new fabric.Text(text: String , { fontWeight: Number|String }: Object)
Parameters
text ? This parameter accepts a String which is the text string that we want to display.
options (optional) ? This parameter is an Object which provides additional customizations to our text. Using this parameter 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 text. Its default value is normal.
Example 1: Using Numerical Value
Passing the fontWeight property as key with a numerical value
Let's see a code example to understand how our text 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 text object
var text = new fabric.Text("Add sample text here", {
left: 50,
top: 70,
fontWeight: 400,
});
// Add it to the canvas
canvas.add(text);
</script>
</body>
</html>
Example 2: Using String Value
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 text 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 text 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 text object
var text = new fabric.Text("Add sample text here", {
left: 50,
top: 70,
fontWeight: "bold",
});
// Add it to the canvas
canvas.add(text);
</script>
</body>
</html>
Font Weight Values
The fontWeight property accepts both numerical values (100-900) and string values:
- Numerical values: 100 (thin), 200 (extra light), 300 (light), 400 (normal), 500 (medium), 600 (semi-bold), 700 (bold), 800 (extra bold), 900 (black)
- String values: "normal", "bold", "bolder", "lighter"
Conclusion
The fontWeight property in FabricJS provides flexible control over text appearance, accepting both numerical (100-900) and string values. Use numerical values for precise control or string values like "bold" for common styling needs.
538 Views
