Create Textbox with Crosshair Cursor on Moving Objects using Fabric.js

Rahul Gurung
Updated on 29-Jul-2022 12:45:49

228 Views

In this tutorial, we are going to create a Textbox with a crosshair cursor on moving objects using FabricJS. Crosshair 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 our ... Read More

Create Textbox with Border Colour using FabricJS

Rahul Gurung
Updated on 29-Jul-2022 12:33:51

1K+ Views

In this article, we are going to create a Textbox with border colour 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. One of the properties that FabricJS provides is borderColor which allows us to manipulate the colour of the border when our object is active.Syntaxnew fabric.Textbox(text: String, { borderColor: String }: Object)Parameterstext − This parameter accepts ... Read More

Create Textbox with Background Colour Using Fabric.js

Rahul Gurung
Updated on 29-Jul-2022 12:29:50

509 Views

In this tutorial, we are going to create a Textbox with background colour 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 backgroundColor property allows us to assign a colour to our object’s background and it is rectangular in shape for the textbox.Syntaxnew fabric.Textbox(text: String, { backgroundColor: String }: Object)Parameterstext − This parameter accepts a ... Read More

Create a Canvas with Textbox Using Fabric.js

Rahul Gurung
Updated on 29-Jul-2022 12:24:50

779 Views

In this tutorial, we are going to learn about how to create a canvas with a Textbox object 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.Syntaxnew fabric.Textbox( text: String, options: 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 ... Read More

Change Font Weight of a Textbox Using Fabric.js

Rahul Gurung
Updated on 29-Jul-2022 12:23:17

538 Views

In this tutorial, we are going to see how to change the font weight 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. Font weight refers to the value which determines how bold or light our text will appear.Syntaxnew fabric.Textbox(text: String, { fontWeight: Number|String }: Object)Parameterstext − This parameter accepts a String which is the text string that we want to display inside our textbox.options (optional) − This parameter ... Read More

Change Font Style of a Textbox Using Fabric.js

Rahul Gurung
Updated on 29-Jul-2022 12:15:53

894 Views

In this tutorial, we are going to see how to change the font style 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. Font style refers to the style of characters typed within a textbox.Syntaxnew fabric.Textbox(text: String, { fontStyle: String }: 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 ... Read More

Change Font Size of Textbox Using FabricJS

Rahul Gurung
Updated on 29-Jul-2022 12:07:45

667 Views

In this tutorial, we are going to see how to change the font size 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 font size specifies how large or small the characters displayed in our textbox should be. We can change the font size by using the fontSize property.Syntaxnew fabric.Textbox(text: String, { fontSize: Number }: Object)Parameterstext − This parameter accepts a String which is the text string that we ... Read More

Add Stroke to a Textbox Using Fabric.js

Rahul Gurung
Updated on 29-Jul-2022 12:04:10

409 Views

In this tutorial, we are going to learn how to add stroke to 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 colour, or by changing the colour of the line drawn around the object. We can do this by using the stroke property.Syntaxnew fabric.Textbox(text: String, { stroke : String }: Object)Parameterstext − This ... Read More

Add Shadow to a Textbox Using Fabric.js

Rahul Gurung
Updated on 29-Jul-2022 12:00:42

800 Views

In this tutorial, we are going to learn how to add a shadow to 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 even adding a shadow to it. We can add a shadow to the textbox by using the shadow property.Syntaxnew fabric.Textbox(text: String, { shadow : fabric.Shadow }: Object)Parameterstext − This ... Read More

Add Dashed Stroke to Textbox Using Fabric.js

Rahul Gurung
Updated on 29-Jul-2022 11:57:49

225 Views

In this tutorial, we are going to learn how to add a dashed stroke to 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 strokeDashArray property allows us to specify a dash pattern for the object's stroke.Syntaxnew fabric.Textbox(text: String, { strokeDashArray: Array }: 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 ... Read More

Advertisements