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 13 of 49
How to add stroke to a Triangle using FabricJS?
In this tutorial, we are going to learn how to add stroke to a Triangle 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. Our triangle 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. Syntax new fabric.Triangle({ stroke: String }: Object) ...
Read MoreHow to make the controlling corners of a Textbox transparent using FabricJS?
In this tutorial, we are going to learn how to make the controlling corners of a 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 ...
Read MoreHow to change the colour of cursor in IText using FabricJS?
In this tutorial, we are going to learn about how to change the colour of cursor in IText object using FabricJS. The IText class was introduced in FabricJS version 1.4, extends fabric.Text and is used to create IText instances. An IText instance gives us the freedom to select, cut, paste or add new text without additional configurations. There are also various supported key combinations and mouse/touch combinations which make text interactive which are not provided in Text. Textbox, however, which is based on IText allows us to resize the text rectangle and wraps lines automatically. This is not true ...
Read MoreHow to disable the selectability of Circle using FabricJS?
In this tutorial, we are going to learn how to disable selectability of a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will have to create an instance of fabric.Circle class and add it to the canvas. In order to modify an object, we have to select it in FabricJS. However, we can change this behaviour by using the selectable property. Syntax new fabric.Circle({ selectable: Boolean }: Object) Parameters ...
Read MoreHow to set the alignment of text in a Textbox using FabricJS?
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 ...
Read MoreHow to find the original size of an Image using FabricJS?
In this tutorial, we are going to learn how to find the original size of an Image using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to find the original size of an Image, we use the getOriginalSize method. Syntax getOriginalSize(): Object Return Value The method returns an object containing the width and height of the original image in pixels: { ...
Read MoreHow to set the color of controlling corners of Ellipse using FabricJS?
In this tutorial, we are going to set the color of controlling corners of Ellipse using FabricJS. The cornerColor property allows us to manipulate the color of the controlling corners when the object is active. Syntax new fabric.Ellipse({ cornerColor: String }: Object) Parameters options (optional) − This parameter is an Object which provides additional customizations to our ellipse. Using this parameter color, cursor, stroke width and a lot of other properties can be changed related to the object of which the cornerColor is ...
Read MoreHow to create a canvas with Triangle using FabricJS?
In this tutorial, we are going to learn about how to create a canvas with a Triangle object 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. Syntax new fabric.Triangle({ width: Number, height: Number }: Object) Parameters Options (optional) − This parameter is an Object which provides additional customizations to our triangle. Using this parameter, properties such as ...
Read MoreHow to set the angle of rotation of a Textbox using FabricJS?
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 ...
Read MoreHow to change the cursor width in IText using FabricJS?
In this tutorial, we are going to learn about how to change the cursor width in IText object using FabricJS. The IText class was introduced in FabricJS version 1.4, extends fabric.Text and is used to create IText instances. An IText instance gives us the freedom to select, cut, paste or add new text without additional configurations. There are also various supported key combinations and mouse/touch combinations which make text interactive which are not provided in Text. Textbox, however, which is based on IText allows us to resize the text rectangle and wraps lines automatically. This is not true for ...
Read More