Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add subscript with Text using FabricJS?
In this tutorial, we are going to learn how to add subscript with 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. We can also add subscripts by using the setSubscript method.
Syntax
setSubscript(start: Number, end: Number)
Parameters
start − This parameter accepts a Number as value. The value given determines the starting point for subscript..
end − This parameter accepts a Number as value. The value given determines the ending point for subscript.
Example 1
Default appearance of the Text object
Let’s see a code example to see how our text object looks when the setSubscript method is not used. In this case, no subscript will be present.
<!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>Default appearance of the Text object</h2> <p>You can see that no subscript is present</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: 300, left: 50, top: 70, fill: "green", }); // Add it to the canvas canvas.add(text); </script> </body> </html>
Example 2
Using the setSubscript method with custom values
In this example, we will see how by using the setSubscript method, we are able to turn certain characters into “inferior figures”. Such characters would be present slightly below the baseline. In this example we have used the values as 0 and 4 which means the subscript will start at the 0th index and end at the 4th index.
<!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>Using the setSubscript method with custom values</h2> <p>You can see that subscript has been added to the 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.", { width: 300, left: 50, top: 70, fill: "green", }); // Using the setSubscript method text.setSubscript(0,4) // Add it to the canvas canvas.add(text); </script> </body> </html>
112 Views
