Found 538 Articles for HTML5 Canvas

How to change the font weight of a Textbox using FabricJS?

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

387 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

How to change the font style of a Textbox using FabricJS?

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

690 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

How to change the font size of a Textbox using FabricJS?

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

490 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

How to add stroke to a Textbox using FabricJS?

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

291 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

How to add shadow to a Textbox using FabricJS?

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

520 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

How to add dashed stroke to a Textbox using FabricJS?

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

145 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 XHTML and HTML 5

Pradeep Kumar
Updated on 29-Jul-2022 09:26:21

687 Views

People who are just starting out on the web often say that they have trouble identifying the difference between HTML 5 and XHTML. There is sometimes a lack of clarity on which of these languages is best for a beginner. It is not surprising that such misunderstanding continues to exist, given that both XHTML and HTML 5 serve, more or less, the same purpose.Go through this article to get an overview of XHTML and HTML 5 and learn how these two markup languages differ from each other.What is XHTML?XHTML stands for EXtensible HyperText Markup Language. The Internet has advanced to ... Read More

How to set the minimum allowed scale value of Rectangle using FabricJS?

Rahul Gurung
Updated on 30-Jun-2022 14:33:09

93 Views

In this tutorial, we are going to learn how to set the minimum allowed scale of Rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we will have to create an instance of fabric.Rect class and add it to the canvas.We can customize a rectangle object by adding a fill colour to it, eliminate its borders or even make changes in its dimensions. Similarly, we can also set its minimum allowed scale by using the minScaleLimit property.Syntaxnew fabric.Rect({ minScaleLimit : Number }: Object)ParametersOptions (optional) − This parameter is an Object ... Read More

How to set the border scale factor of Rectangle using FabricJS?

Rahul Gurung
Updated on 30-Jun-2022 09:04:44

284 Views

In this tutorial, we are going to set the border scale factor of Rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we will have to create an instance of fabric.Rect class and add it to the canvas.We can use the borderScaleFactor property which specifies the scale factor of the object's controlling borders.Syntaxnew fabric.Rect({ borderScaleFactor: Number }: Object)ParametersOptions (optional) − This parameter is an Object which provides additional customizations to our rectangle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be ... Read More

How to lock the rotation of Rectangle using FabricJS?

Rahul Gurung
Updated on 29-Jun-2022 11:52:19

469 Views

In this tutorial, we are going to learn how to lock the rotation of a Rectangle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a rectangle object in the canvas, we can also specify whether we want it to rotate or not. This can be done by using the lockRotation property.Syntaxnew fabric.Rect({ lockRotation : Boolean }: Object)ParametersOptions (optional) − This parameter is an Object which provides additional customizations to our rectangle. Using this parameter, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the object ... Read More

Advertisements