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

544 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

824 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

568 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

940 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

705 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

440 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

846 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

249 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

Difference Between HashMap and TreeMap in Java

Pradeep Kumar
Updated on 29-Jul-2022 11:42:50

3K+ Views

Both HashMap and TreeMap are considered to be Map classes because they both carry out the responsibilities of the Map interface. A Map is an object that stores key-value pairs, in which there is only one instance of each key but there may be multiple instances of the value. The hash table is a type of data structure that is utilised by the HashMap class. As a form of data storage, the red-black tree is utilised by the TreeMap.What is a HashMap?A HashMap uses a data structure known as the hash table in order to store the map's key-value pair. ... Read More

Advertisements