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 string characters by frequency in JavaScript
In JavaScript, sorting string characters by frequency involves counting each character's occurrences and rearranging them from most frequent to least frequent. This technique is useful for data analysis, compression algorithms, and text processing tasks. Problem Statement We need to create a JavaScript function that takes a string as input and returns a new string where characters are arranged by their frequency in descending order. Characters appearing most frequently come first, followed by less frequent ones. For example, if the input string is: const str = 'free'; The expected output should be: ...
Read MoreSorting according to number of 1s in binary representation using JavaScript
Problem We need to write a JavaScript function that takes an array of numbers and sorts them in descending order based on the count of 1s in their binary representation. Understanding Binary Representation Every number has a binary representation. For example: 5 → 101 (two 1s) 78 → 1001110 (four 1s) 11 → 1011 (three 1s) Solution Approach We'll create two functions: one to count 1s in binary representation and another to sort the array. const arr = [5, 78, 11, 128, 124, 68, 6]; const countOnes = (num) => ...
Read MoreBalancing two arrays in JavaScript
We are required to write a JavaScript function that takes in two arrays of numbers, arr1 and arr2, as the first and the second argument. The sum of elements in arr1 and arr2 are different. Our function should pick one element from the first array and push it in the second array and pick one element from the second array and push it in the first array such that the sum of the elements of both the arrays become equal. We should return an array of these two elements. Problem Statement For example, if the input to ...
Read MoreHow to create a canvas using FabricJS?
In this article, we are going to create a canvas using FabricJS but before that let us understand what a canvas is. For drawing graphics on a webpage, we have a web API called Canvas API. This API is good for drawing basic shapes but adding interaction to it or drawing complex shapes becomes very difficult. Thus FabricJS comes into the picture which is a library built on top of the Canvas API. To use FabricJS, the first thing that needs to be done is to create a FabricJS Canvas. Syntax new fabric.Canvas(element: HTMLElement|String, options: Object) ...
Read MoreHow to hide the controlling corners of a Circle using FabricJS?
In this tutorial, we are going to learn how to hide the controlling corners of a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we have to create an instance of fabric.Circle class and add it to the canvas. The controlling corners of an object allow us to increase or decrease its scale, stretch or change its position. We can customize our controlling corners in many ways such as adding a specific colour to it, changing their size etc. However, we can also hide them using the hasControls property. ...
Read MoreHow to create a Triangle with dash pattern border using FabricJS?
In this tutorial, we are going to create a triangle with a dash pattern border 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 change the appearance of the dashes of border by using the borderDashArray property. However, our triangle object must have borders enabled in order for this property to work. If the hasBorders property is assigned a false value, this property will not work. Syntax new fabric.Triangle({ ...
Read MoreHow to set the dash pattern of controlling corners of Textbox using FabricJS?
In this tutorial, we are going to learn how we can implement the dash pattern of controlling corners of Textbox 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 also specify a dash pattern for the controlling corners by using the cornerDashArray property. Syntax new fabric.Textbox(text: String, { cornerDashArray: Array }: Object) Parameters ...
Read MoreHow to check if the IText object has fill using FabricJS?
In this tutorial, we are going to learn about how to check if the IText object has fill 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 position of Image object with respect to origin?
In this tutorial, we are going to learn how to get the position of Image object with respect to origin 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 get the position of Image object with respect to origin, we use the getPointByOrigin method. Syntax getPointByOrigin(originX: String, originY: String): fabric.Point Parameters originX − This parameter accepts a String ...
Read MoreExplain the benefits of spread syntax & how it is different from rest syntax in ES6?
In the ES6 version of JavaScript, spread syntax is introduced as a very powerful feature. We can use the spread syntax to expand the array or objects into the variable of the same data type. For example, before the spread syntax was introduced in the ES6, developers were using the for loop to copy all elements of one array to another array. Can you copy all elements of one array to another by writing one linear code using the spread syntax rather than writing the 5 to 7 lines of code using the for loop? Yes, you heard right! ...
Read More