Change Font Family of Text Using Fabric.js

Rahul Gurung
Updated on 13-Sep-2022 12:03:45

2K+ Views

In this tutorial, we are going to learn about how to change the font family of Text object 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 change the font family by using the fontFamily property. Syntax new fabric.Text(text: String, { fontFamily: String }: Object) Parameters text − This parameter ... Read More

Center Text Object Vertically on Canvas using Fabric.js

Rahul Gurung
Updated on 13-Sep-2022 12:02:12

825 Views

In this tutorial, we are going to learn how to center a Text vertically on canvas 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 center the text object vertically on the canvas by using the centerV method. Syntax centerV() Example 1 Default appearance of the Text object Let’s see ... Read More

Center Text Object Horizontally on Canvas Using Fabric.js

Rahul Gurung
Updated on 13-Sep-2022 12:01:07

1K+ Views

In this tutorial, we are going to learn how to center a Text horizontally on canvas 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 center the text object horizontally on the canvas by using the centerH method. Syntax centerH() Example 1 Default appearance of the Text object Let’s see ... Read More

Center Text Object on Canvas Using Fabric.js

Rahul Gurung
Updated on 13-Sep-2022 11:58:15

441 Views

In this tutorial, we are going to learn how to center a Text horizontally and vertically on canvas 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 center the text object horizontally and vertically on the canvas by using the center method. Syntax center() Example 1 Default appearance of the ... Read More

Add Underline to Text Using FabricJS

Rahul Gurung
Updated on 13-Sep-2022 11:56:59

713 Views

In this tutorial, we are going to learn how to add underline to 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 overline, line height which can be obtained by the properties textAlign, overline and lineHeight respectively. Similarly we can also add underline to text by using the underline property. Syntax new fabric.Text(text: String , { underline: Boolean }: Object) Parameters text − This parameter ... Read More

Add Superscript with Text Using Fabric.js

Rahul Gurung
Updated on 13-Sep-2022 11:55:38

315 Views

In this tutorial, we are going to learn how to add superscript 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 superscripts by using the setSuperscript method. Syntax setSuperscript(start: Number, end: Number) Parameters start − This parameter accepts a Number as value. The value given determines ... Read More

Add Subscript with Text Using Fabric.js

Rahul Gurung
Updated on 13-Sep-2022 11:54:36

290 Views

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 ... Read More

Add Stroke to Text Using Fabric.js

Rahul Gurung
Updated on 13-Sep-2022 11:53:04

345 Views

In this tutorial, we are going to learn how to add stroke to 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 add stroke by using the stroke property. Syntax new fabric.Text(text: String, { stroke: String }: Object) Parameters text − This parameter accepts a String which is the ... Read More

Add Space Between Characters in Text Using Fabric.js

Rahul Gurung
Updated on 13-Sep-2022 11:51:42

486 Views

In this tutorial, we are going to learn about how to add space between characters in a Text object 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 extra space between each character by using the charSpacing property. Syntax new fabric.Text(text: String , { charSpacing: Number }: Object) Parameters ... Read More

Add Linethrough to Text Using Fabric.js

Rahul Gurung
Updated on 13-Sep-2022 11:50:20

256 Views

In this tutorial, we are going to learn about how to set the text decoration of Text object 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, font family, line height which can be obtained by the properties textAlign, fontFamily and lineHeight respectively. We can add linethrough by using the linethrough property. Syntax new fabric.Text(text: String , { linethrough: Boolean }: Object) Parameters text − This parameter accepts ... Read More

Advertisements