In this tutorial, we are going to learn how to lock the horizontal scaling of a Textbox using FabricJS. Just as we can specify the position, colour, opacity and dimension of a textbox object in the canvas, we can also specify whether we want to stop scaling an object horizontally. This can be done by using the lockScalingX property. Syntax new fabric.Textbox(text: String, { lockScalingX : Boolean }: Object) Parameters text − This parameter accepts a String which is the text string that we want to display inside our textbox. options (optional) − This parameter is an Object ... Read More

In this tutorial, we are going to learn how to lock the horizontal movement of a Textbox using FabricJS. Just as we can specify the position, colour, opacity and dimension of a textbox object in the canvas, we can also specify whether we want it to move only in the Y-axis. This can be done by using the lockMovementX property. Syntax new fabric.Textbox(text: String, { lockMovementX: Boolean }: Object) Parameters text − This parameter accepts a String which is the text string that we want to display inside our textbox. options (optional) − This parameter is an Object ... Read More

In this tutorial, we are going to learn how to lock the flipping during scaling of a Textbox using FabricJS. Just as we can specify the position, colour, opacity and dimension of a textbox object in the canvas, we can also specify whether we want to stop flipping an object during scaling. This can be done by using the lockScalingFlip property. Syntax new fabric.Textbox(text: String, { lockScalingFlip : Boolean }: Object) Parameters text − This parameter accepts a String which is the text string that we want to display inside our textbox. options (optional) − This parameter is ... Read More

In this tutorial, we are going to learn to change strings to be displayed as a superscript using JavaScript. As the name suggests, the superscript string is displayed at the half-height of the normal string. Also, characters of the superscript string are smaller than the normal string characters.There are a lot of uses of the superscript string while writing the mathematical formulas. For example, A2, B2, 105, etc. Also, we can use the superscript to show the chemical formulas such as O22-, H-, etc.Here, using HTML or JavaScript, users can learn to display string as a superscript.Display string as subscript ... Read More

In this tutorial, we are going to learn how we can flip a Textbox object vertically using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. We can flip a textbox object vertically using the flipY property.Syntaxnew fabric.Textbox(text: String, { flipY: Boolean }: Object)Parameterstext − This parameter accepts a String which is the text string that we want to display inside our textbox.options (optional) − This parameter is an Object which provides additional ... Read More

In this tutorial, we are going to learn how we can flip a Textbox object horizontally using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. We can flip a textbox object horizontally using the flipX property.Syntaxnew fabric.Textbox(text: String, { flipX: Boolean }: Object)Parameterstext − This parameter accepts a String which is the text string that we want to display inside our textbox.options (optional) − This parameter is an Object which provides additional customizations to our ... Read More

In this tutorial, we are going to learn how to disable the selectability of a Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. In order to modify an object, we have to select it in FabricJS. However, we can change this behaviour by using the selectable property.Syntaxnew fabric.Textbox(text: String, { selectable: Boolean }: Object)Parameterstext − This parameter accepts a String which is the text string that we want to display inside ... Read More

In this tutorial, we are going to learn how to disable the centered scaling of Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. When being scaled via controls, assigning a true value to the centeredScaling property, uses the center as the object's origin of transformation.Syntaxnew fabric.Textbox(text: String, { centeredScaling: Boolean }: Object)Parameterstext − This parameter accepts a String which is the text string that we want to display inside our textbox.options ... Read More

In this tutorial, we are going to learn how to disable the centered rotation of Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. 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.Syntaxnew fabric.Textbox(text: String, { centeredRotation: Boolean }: Object)Parameterstext − This parameter accepts a String which is the text string that we want to ... Read More

In this article, we are going to create a Textbox with a wait cursor on moving objects using FabricJS. wait is one of the native cursor styles available which can be used in the FabricJS canvas too. FabricJS provides various types of cursors like default, all scroll, crosshair, col-resize, row-resize etc which are reusing the native cursor underhood. The moveCursor property sets the style of the cursor when the object is moved around in the canvas.Syntaxnew fabric.Textbox(text: String, { moveCursor: String }: Object)Parameterstext − This parameter accepts a String which is the text string that we want to display inside ... Read More