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
Sorting according to weights of numbers in JavaScript
In this problem, we need to sort an array of numbers according to their weights using JavaScript. The weight of a number is defined as the sum of its digits, and we'll create functions to calculate weights and perform the sorting. Understanding the Problem We have to sort numbers according to their weights, where a weight is the sum of a number's digits. For example, if we have an array [19, 11, 12, 15]: Weight of 19 = 1 + ...
Read MoreFinding two missing numbers that appears only once and twice respectively in JavaScript
We need to write a JavaScript function that finds two numbers in an array where all other numbers appear three times, except one number that appears twice and another that appears only once. Problem Statement Given an array where most numbers appear three times, find the two numbers that appear exactly twice and exactly once respectively. Example Let's solve this step by step: const arr = [1, 1, 1, 2, 2, 3]; const findMissing = (arr = []) => { let x = 0; // number appearing once ...
Read MoreMaking two sequences increasing in JavaScript
In JavaScript, making two sequences strictly increasing by swapping elements at the same indices is a dynamic programming problem. A sequence is strictly increasing if each element is greater than the previous one. Problem Statement Given two arrays arr1 and arr2, we can swap elements at any index i between the arrays. The goal is to find the minimum number of swaps needed to make both arrays strictly increasing. Understanding the Example Consider the input arrays: const arr1 = [1, 3, 5, 4]; const arr2 = [1, 2, 3, 7]; console.log("Original arrays:"); console.log("arr1:", ...
Read MoreHow to create a canvas with a class using FabricJS?
In this article, we will see how to create a canvas with a class on it using the containerClass property. In order to have access over the native HTML canvas element, we can add a wrapper class over it. This class allows us to have control over the element to add interactivity or styling as per requirement. Syntax new fabric.Canvas(element: HTMLElement|String, { containerClass: String}: Object) Parameters element − This parameter is the element itself which can be derived using document.getElementById() or the ...
Read MoreHow to add shadow to a Circle using FabricJS?
In this tutorial, we are going to learn how to add a shadow to a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will create an instance of fabric.Circle class and add it to the canvas. Our circle 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 a Circle by using the shadow property. Syntax new fabric.Circle({ shadow : fabric.Shadow }: Object) Parameters ...
Read MoreHow to set the minimum allowed scale value of Circle using FabricJS?
In this tutorial, we are going to learn how to set the minimum allowed scale of 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. We can customize a circle 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. Syntax new fabric.Circle({ minScaleLimit : Number }: Object) ...
Read MoreHow to set the angle of rotation of a Triangle using FabricJS?
In this tutorial, we are going to set the angle of rotation of 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. 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 triangle as the origin of transformation. Syntax new fabric.Triangle({ angle: Number, ...
Read MoreHow to set the vertical origin of transformation of IText using FabricJS?
In this tutorial, we are going to learn how to set the vertical origin of transformation of IText 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 MoreFabricJS – How to get the coordinates of a Line object as if it has a different origin?
In this tutorial, we are going to learn about how to get the coordinates of a Line as if it has a different origin using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. In order to find the coordinates of a Line object as if ...
Read MoreFabricJS – Finding the Transform Matrix that Represents the Current Transformations for a Polygon Object?
We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized by any closed shape consisting of a set of connected straight line segments. 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 transform matrix which represents current transformations, we use the calcOwnMatrix method. Syntax calcOwnMatrix(): Array Understanding Transform Matrix The transform matrix is a 6-element array that represents all transformations applied to an object: [scaleX, skewY, skewX, ...
Read More