How to set the angle of rotation of a Text using FabricJS?

In this tutorial, we are going to set the angle of rotation of a 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. The angle property in FabricJS defines the angle of 2D rotation of an object. We also have the centeredRotation property that allows us to use the center point of a text object as the origin of transformation.

Syntax

new fabric.Text(text: String , { angle: Number, centeredRotation: Boolean }: 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 text object of which angle and centeredRotation are the properties.

Options Keys

angle − This property accepts a Number which specifies the angle of rotation of a text object in degrees.
centeredRotation − The property accepts a Boolean value which determines whether the center of the text object is the origin of transformation or not.

Example 1

Passing angle as key with a custom value and disabling the centered rotation for the Text

Let’s see a code example to set the angle of rotation of a Text in FabricJS. A negative angle specifies counter-clockwise direction whereas a positive angle specifies a clockwise direction. Since we have assigned centeredRotation a false value, the text will rotate while using its corner point as the center of rotation.


<!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 angle as key with a custom value and disabling the centered rotation for the Text</h2>
   <p>You can select and rotate the text object to verify that it uses its corner point as the center of rotation</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", {
         width: 200,
         top: 70,
         left: 60,
         centeredRotation: false,
         angle: 15,
      });
      
      // Add it to the canvas
      canvas.add(text);
   </script>
</body>
</html>

Example 2

Enabling centered rotation for the text object

As we can see from this example, by setting the centeredRotation property as true, our text object now uses its center as the center of rotation. Prior to version 1.3.4, centeredScaling and centeredRotation were enclosed within one single property called centerTransform.


<!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>Enabling centered rotation for the text object</h2>
   <p>You can select and rotate the text to verify that it now uses its center as center of rotation</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", {
         width: 200,
         top: 70,
         left: 110,
         centeredRotation: true,
         angle: 15,
      });

      // Add it to the canvas
      canvas.add(text);
   </script>
</body>
</html>