In this tutorial, we are going to learn how to set the baseline of 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 use the subscript property where we can specify its baseline value. Syntax new fabric.Text(text: String , { subscript : {“size”: Number, "baseline": Number}: Object }: ... Read More

In this tutorial, we are going to learn how to set the background colour of text lines 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. Similarly we can also set the background colour of text lines by using the textBackgroundColor property. Syntax new fabric.Text(text: String , { textBackgroundColor : String }: ... Read More

In this tutorial, we are going to learn how to set the angle of rotation of an instance 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. Similarly, we can also set the angle of rotation of an instance by using the rotate method. Syntax rotate(angle: Number) Parameters angle − ... Read More

In this tutorial, we are going to set the angle of rotation 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 angle property in FabricJS defines the angle of 2D rotation of an object. We also have the centeredRotation property that allows us to use the center point of a ... Read More

In this tutorial, we are going to learn how to scale a Text object to a given width 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 to a given width by using the scaleToWidth method. Syntax scaleToWidth(value: Number, absolute: Boolean) Parameters value − ... Read More

In this tutorial, we are going to learn how to scale a Text object to a given height 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 to a given height by using the scaleToHeight method. Syntax scaleToHeight(value: Number, absolute: Boolean) Parameters value − ... Read More

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