How to change the font weight of Text using FabricJS?

FabricJS Javascript HTML5 Canvas

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

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

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>

Rahul Gurung

Updated on: 13-Sep-2022

266 Views

Kickstart Your Career

Get certified by completing the course

Get Started