In this tutorial, we are going to learn how to scale a Text object equally to horizontal and vertical direction 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. Similarly we can also scale a Text object by using the scale method. Syntax scale(value: Number) Parameters scale − This parameter accepts a ... Read More

In this tutorial, we are going to learn how to make the controlling corners of Text transparent 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 transparentCorners property allows us to make the controlling corners of Text object transparent. Syntax new fabric.Text(text: String ,{ transparentCorners: Boolean }: Object) Parameters text − This ... Read More

In this tutorial, we are going to learn how to include Text object’s default values in its serialization 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 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 includeDefaultValues property allows us to include or omit the object’s default values when being serialized. Syntax new fabric.Text(text: String , { includeDefaultValues: Boolean }: ... Read More

In this tutorial, we are going to learn how to get the style of current selection 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 style of current selection by using the getSelectionStyles method. Syntax getSelectionStyles(startIndexopt, endIndexopt, completeopt) Parameters startIndexopt − This parameter accepts a ... Read More

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