Rahul Gurung

Rahul Gurung

490 Articles Published

Articles by Rahul Gurung

Page 16 of 49

How to disable the centered scaling of Text using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 14-Sep-2022 455 Views

In this tutorial, we are going to learn how to disable the centered scaling 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. When being scaled via controls, assigning a true value to the centeredScaling property, uses the center as the object's origin of transformation. Syntax new fabric.Text(text: String, { centeredScaling: Boolean ...

Read More

How to disable the centered rotation of Text using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 13-Sep-2022 263 Views

In this tutorial, we are going to learn how to disable the centered rotation 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. By default all objects in FabricJS use their center as the point of rotation. However, we can change this behaviour by using the centeredRotation property. Syntax new fabric.Text(text: String, ...

Read More

How to create a Text with dash pattern border using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 13-Sep-2022 330 Views

In this tutorial, we are going to create a Text with a dash pattern border 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 appearance of the dashes of border, by using the borderDashArray property. However, our text object must have borders in order for this property to work. If ...

Read More

How to create a canvas with Text using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 13-Sep-2022 1K+ Views

In this tutorial, we are going to learn about how to create a canvas with 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. One difference between Text and Textbox is, Textbox is editable interactively while Text isn’t. Syntax new fabric.Text( text: String , options: Object) Parameters text − ...

Read More

How to compute the height of a character at given position in Text using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 13-Sep-2022 466 Views

In this tutorial, we are going to learn how to compute the height of line at required line index in 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 compute the height of line at required line index by using the getHeightOfLine method. Syntax getHeightOfLine(lineIndex: Number) Parameters lineIndex ...

Read More

How to change the font weight of Text using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 13-Sep-2022 510 Views

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

Read More

How to change the font style of Text using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 13-Sep-2022 513 Views

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

Read More

How to change the font size of Text using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 13-Sep-2022 1K+ Views

In this tutorial, we are going to see how to change the font size 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 font size specifies how large or small the characters, displayed in our Text object, should be. We can change the font size by using the fontSize property ...

Read More

How to change the font family of Text using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 13-Sep-2022 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

How to center a Text object vertically on canvas using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 13-Sep-2022 840 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
Showing 151–160 of 490 articles
« Prev 1 14 15 16 17 18 49 Next »
Advertisements