Fabric.js Text subscript Property

In this article, we are going to see how to change the subscript of the text canvas using Fabric.js. The canvas means the text written is movable, rotatable, resizable, and can be stretched. Further, the text itself cannot be edited like a textbox.

Approach: To make it possible, we are going to use a JavaScript library called Fabric.js. After importing the library using CDN, we will create a canvas block in the body tag that will contain our text. After this, we will initialize instances of Canvas and Text provided by Fabric.js and set the subscript of the canvas text using subscript property.

Syntax:

fabric.Text(text,
   subscript: Object
);

Parameters: This property accepts a single parameter as mentioned above and described below:

subscript: It defines the Object on the basis of which the subscript will be defined.

Below is the example that illustrates the use of subscript property in Fabric.js:

Example:

HTML

<!DOCTYPE html> 

<html> 

<head> 

  <script src= 

"https://github.com/denim2x/fabric.js/releases/download/v2.0.0-beta.6/fabric.min.js"> 

  </script> 

</head> 

<body> 

  <div style="text-align: center; 

              width: 400px;">  

    <h1 style="color: green;">  

      GeeksforGeeks  

    </h1> 

    <b>  

      Fabric.js | Text superscript Property  

    </b>  

  </div>  

  <canvas id="stage" 

          width="300" height="200" 

     style="border:1px solid green;"> 

  </canvas> 

  <script> 

    var canvas = new fabric.Canvas(stage); 

    var text = new fabric.Text( 

      'GeeksforGeeks.', 

      { fontSize: 20, fontFamily: 'Verdana' } 

    ); 

    canvas.add(text); 

    canvas.centerObject(text); 

    text.setSelectionStyles('subscript', 5, 8); 

  </script> 

</body> 

</html>

Output:

Article Tags :

JavaScript

Web Technologies

Fabric.js