In this tutorial, we are going to learn how to get the scaled width 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. We can also find the object’s scaled width by using the getScaledWidth method. Syntax getScaledWidth() Example 1 Using the getScaledWidth method Let’s see a code example to see ... Read More

In this tutorial, we are going to learn how to get the scaled height 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. We can also find the object’s scaled height by using the getScaledHeight method. Syntax getScaledHeight() Example 1 Using the getScaledHeight method Let’s see a code example to see ... Read More

In this tutorial, we are going to learn how to get the opacity 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. We can also find the opacity of an object by using the getObjectOpacity method. Syntax getObjectOpacity() Example 1 Using the getObjectOpacity method Let’s see a code example to see ... Read More

In this tutorial, we are going to learn how to get the object scale factor 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. We can also find the object scale factor by using the getObjectScaling method. Syntax getObjectScaling() Example 1 Using the getObjectscaling method Let’s see a code example to ... Read More

In this tutorial, we are going to learn how to exclude Text object from being saved while using JSON.stringify() in 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 we can also add additional functionalities. Serialization is used in order to export canvas contents. In order to achieve this we use toObject() and toJSON() methods. The excludeFromExport property allows us to include or omit the object when being exported. Syntax new fabric.Text(text: String , { excludeFromExport : Boolean }: ... Read More

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

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

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

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

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