Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Rahul Gurung
Page 35 of 49
How to change the font size of Text using FabricJS?
In this tutorial, we are going to see how to change the font size of a Text using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. The font size specifies how large or small the characters, displayed in our Text object, should be. We can change the font size by using the fontSize property. ...
Read MoreHow to set the position of a Triangle from left using FabricJS?
In this tutorial, we are going to learn how to set the position of a Triangle from the left using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of fabric.Triangle class and add it to the canvas. We can manipulate a triangle object by changing its position, opacity, stroke and also its dimension. The position from left can be changed by using the left property. Syntax new fabric.Triangle({ left: Number ...
Read MoreHow to change the font style of Text using FabricJS?
In this tutorial, we are going to learn about how to change the font style in Text object using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. We can change the font style by using the fontStyle property. Syntax new fabric.Text(text: String, { fontStyle: String }: Object) Parameters ...
Read MoreHow to set the position of a Triangle from top using FabricJS?
In this tutorial, we will learn how to set the position of a triangle from the top using FabricJS. The top property allows us to manipulate the vertical position of the triangle object on the canvas. By default, when no top value is specified, the triangle is positioned at the top edge of the canvas. Syntax new fabric.Triangle({ top: Number }) Parameters Options (optional) − This parameter is ...
Read MoreHow to change the font weight of Text using FabricJS?
In this tutorial, we are going to see how to change the font weight of Text using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. Font weight refers to the value which determines how bold or light our text will appear. Syntax new fabric.Text(text: String , { fontWeight: Number|String }: Object) ...
Read MoreHow to set the colour of controlling corners of a Rectangle using FabricJS?
In this tutorial, we are going to set the colour of the controlling corners of Rectangle using FabricJS. The cornerColor property allows us to manipulate the colour of the controlling corners when the object is active. Syntax new fabric.Rect({ cornerColor: String }: Object) Parameters Options (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 of ...
Read MoreHow to compute the height of a character at given position in Text using FabricJS?
In this tutorial, we are going to learn how to compute the height of a line at a specific line index in Text using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, and line height which can be obtained by the properties textAlign, underline and lineHeight respectively. We can also compute the height of a line at a required line index by using the getHeightOfLine method. Syntax ...
Read MoreHow to create a canvas with wait cursor on hover over objects using FabricJS?
In this article, we are going to create a canvas with a wait cursor on hover using FabricJS. The wait cursor is one of the native cursor styles available which can be used in FabricJS canvas. FabricJS provides various types of cursors such as default, all-scroll, crosshair, col-resize, row-resize, etc. that reuse the native cursor under the hood. The hoverCursor property sets the style of the cursor when hovered over a canvas object. Syntax new fabric.Canvas(element: HTMLElement|String, { hoverCursor: String }: Object) Parameters ...
Read MoreHow to set the size of the controlling corners of a Triangle using FabricJS?
In this tutorial, we are going to learn how to set the size of the controlling corners of a Triangle using FabricJS. The controlling corners of an object allow us to scale, stretch or change its position. We can customize our controlling corners in many ways such as adding a specific colour to it, changing its size etc. We can change the size by using the cornerSize property. Syntax new fabric.Triangle({ cornerSize: Number }: Object) Parameters Options (optional) − This ...
Read MoreHow to create a canvas with Text using FabricJS?
In this tutorial, we are going to learn about how to create a canvas with a Text object using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. One difference between Text and Textbox is, Textbox is editable interactively while Text isn't. Syntax new fabric.Text(text: String, options: Object) Parameters ...
Read More