Set Colour of Controlling Corners of Textbox Using Fabric.js

Rahul Gurung
Updated on 02-Aug-2022 13:30:55

182 Views

In this tutorial, we are going to set the colour of the controlling corners of Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. We can also customize the text itself by using properties like fontSize, fontFamily, fontStyle, fontWeight etc. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. The cornerColor property allows us to manipulate the colour of the controlling corners when the object is active. Syntax new fabric.Textbox(text: String, { cornerColor: String }: Object) Parameters text ... Read More

Set Border Opacity of Textbox While Moving Using Fabric.js

Rahul Gurung
Updated on 02-Aug-2022 13:09:10

175 Views

In this tutorial, we are going to set the border opacity of a Textbox while moving 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 change the opacity of the border of a textbox while moving it around in the canvas by using the borderOpacityWhenMoving property. Syntax new fabric.Textbox(text: String, { borderOpacityWhenMoving: Number }: Object) Parameters text − This parameter accepts a String which is the text string ... Read More

Set Border Colour of Text Object in Fabric.js Editing Mode

Rahul Gurung
Updated on 02-Aug-2022 13:06:43

470 Views

In this tutorial, we are going to learn how to set the border color of text object while in editing mode using FabricJS. We can customize a textbox object by adding a fill colour to it, eliminate its borders or even make changes in its dimensions. Similarly, it can be indicated whether a text is editable or not. We can also change the border colour of text object in its editing mode by using the property called editingBorderColor. Syntax new fabric.Textbox(text: String, { editingBorderColor: String }: Object) Parameters text − This parameter accepts a String which is the ... Read More

Set Background Colour of Textbox Selection Using Fabric.js

Rahul Gurung
Updated on 02-Aug-2022 13:03:24

206 Views

In this tutorial, we are going to learn how to set the background colour of selection 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. We can change an object's dimensions, rotate it or manipulate it when it is actively selected. We can change the background colour of selection of Textbox by using the selectionBackgroundColor property. Syntax new fabric.Textbox(text: String, { selectionBackgroundColor : String}: Object) Parameters text ... Read More

Set Angle of Skew on Y-Axis of a Textbox Using Fabric.js

Rahul Gurung
Updated on 02-Aug-2022 12:59:35

234 Views

In this tutorial, we are going to learn how to set the angle of skew on the y-axis 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. Our textbox object can be customized in various ways like changing its dimensions, adding a background color or by changing the angle of skew on the y-axis. We can do this by using the skewY property. Syntax new fabric.Textbox(text: String, { skewY ... Read More

Set Angle of Skew on X-Axis of Textbox Using Fabric.js

Rahul Gurung
Updated on 02-Aug-2022 12:57:05

154 Views

In this tutorial, we are going to learn how to set the angle of skew on the X-axis 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. Our textbox object can be customized in various ways like changing its dimensions, adding a background color or by changing the angle of skew on the X-axis. We can do this by using the skewX property. Syntax new fabric.Textbox(text: String, { skewX ... Read More

Set the Angle of Rotation of a Textbox Using Fabric.js

Rahul Gurung
Updated on 02-Aug-2022 12:55:29

352 Views

In this tutorial, we are going to set the angle of rotation 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. 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 textbox as the origin of transformation. Syntax new fabric.Textbox(text: String, { angle: Number, centeredRotation: Boolean }: Object) ... Read More

Set Text Alignment in a Textbox using Fabric.js

Rahul Gurung
Updated on 02-Aug-2022 12:25:28

2K+ Views

In this tutorial, we are going to learn how to set the alignment of text in 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. Similarly, we can also set its text alignment by using the textAlign property. Syntax new fabric.Textbox(text: String, { textAlign : String }: Object) Parameters text − This parameter accepts a String which is the text string that we want to display inside our ... Read More

Make Controlling Corners of a Textbox Transparent Using Fabric.js

Rahul Gurung
Updated on 02-Aug-2022 12:22:23

227 Views

In this tutorial, we are going to learn how to make the controlling corners of Textbox transparent 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. The transparentCorners property allows us to make the controlling corners of Textbox transparent. Syntax new fabric.Textbox(text: String, { transparentCorners: Boolean }: Object) Parameters text − This parameter accepts a String which is the text string that we want to display inside our textbox. options ... Read More

Make Textbox Invisible Using Fabric.js

Rahul Gurung
Updated on 02-Aug-2022 12:19:55

382 Views

In this tutorial, we are going to learn how to make a Textbox invisible using FabricJS. Textbox is one of the various shapes provided by 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. Our textbox object can be customized in various ways like changing its dimensions, adding a background color or by making it visible or invisible. We can do this by using the visible property. Syntax new fabric.Textbox(text: String, { visible: ... Read More

Advertisements