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 on Trending Technologies
Technical articles with clear explanations and examples
How to create a Rectangle with dash pattern border using FabricJS?
In this tutorial, we are going to create a rectangle with a dash pattern border 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 change the appearance of the dashes of border by using the borderDashArray property. However, our rectangle object must have borders in order for this property to work. If the hasBorders property is assigned a False value, this property will not work. Syntax new fabric.Rect({ borderDashArray: ...
Read MoreHow to lock the horizontal movement of Textbox using FabricJS?
In this tutorial, we are going to learn how to lock the horizontal movement of a Textbox using FabricJS. Just as we can specify the position, colour, opacity and dimension of a textbox object in the canvas, we can also specify whether we want it to move only in the Y-axis. This can be done by using the lockMovementX property. Syntax new fabric.Textbox(text: String, { lockMovementX: Boolean }: Object) Parameters text − This parameter accepts a String which is the text string that we want to display inside our ...
Read MoreHow to enable retina scaling for cloned image using FabricJS?
In this tutorial, we are going to learn how to enable retina scaling for a cloned 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 enable retina scaling for a cloned image, we use the enableRetinaScaling property. In this case, the clone image is scaled up by the devicePixelRatio for better rendering on retina screens. There will be no change on the appearance of the image. Syntax ...
Read MoreDuck Typing in TypeScript
Duck typing is a programming concept where an object's type is determined by its behavior (methods and properties) rather than its class inheritance. The name comes from the phrase "If it walks like a duck and quacks like a duck, then it must be a duck." What is Duck Typing? Duck typing focuses on what an object can do rather than what it is. If two objects have the same methods and properties, they can be used interchangeably, regardless of their actual class or type. Duck Typing in TypeScript TypeScript implements duck typing through interfaces. An ...
Read MoreJavaScript function to prepend string into all the values of array?
In this article, we will learn to prepend a string into all the values of an array in JavaScript. Arrays are versatile data structures used to store multiple elements of similar or mixed types. A common operation is prepending a string to each element of an array, which involves adding a specified string at the beginning of each element. Problem Statement Given a string to prepend and an array of values, we need to add the string at the beginning of each array element and return the modified array. Example Input: const str = "Hello"; ...
Read MoreAbsolute Values Sum Minimization in JavaScript
In JavaScript, finding the value that minimizes the sum of absolute differences from all elements in an array is a fundamental optimization problem. The optimal solution is to find the median of the array. Understanding the Problem Given an array of numbers, we need to find a value x that minimizes the sum of |arr[i] - x| for all elements in the array. Mathematically, this optimal value is always the median of the sorted array. Sum Minimization Concept 1 ...
Read MoreHow to create a Circle with wait cursor on hover over objects using FabricJS?
In this tutorial, we are going to create a Circle with a wait cursor on hover over objects using FabricJS. wait 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 hoverCursor property sets the style of the cursor when hovered over a canvas object. Syntax new fabric.Circle({ hoverCursor: String }: Object) Parameters options (optional) ...
Read MoreHow to lock the vertical movement of a Rectangle using FabricJS?
In this tutorial, we are going to learn how to lock the vertical movement 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 move only in the X-axis. This can be done by using the lockMovementY property. Syntax new fabric.Rect({ lockMovementY: Boolean }: Object) Parameters options (optional) − This parameter is an Object which provides additional customizations to our rectangle. ...
Read MoreHow to lock the horizontal scaling of Textbox using FabricJS?
In this tutorial, we are going to learn how to lock the horizontal scaling of a Textbox using FabricJS. Just as we can specify the position, colour, opacity and dimension of a textbox object in the canvas, we can also specify whether we want to stop scaling an object horizontally. This can be done by using the lockScalingX property. Syntax new fabric.Textbox(text: String, { lockScalingX : Boolean }: Object) Parameters text − This parameter accepts a String which is the text string that we want to display inside our ...
Read MoreHow to add space between characters in IText using FabricJS?
In this tutorial, we are going to learn about how to add space between characters in an 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 More