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 set the border colour of text object while in editing mode in FabricJS?
In this tutorial, we are going to learn how to set the border color of text object while in editing mode using FabricJS. We can customize a textbox object by adding a fill colour to it, eliminate its borders or even make changes in its dimensions. Similarly, it can be indicated whether a text is editable or not. We can also change the border colour of text object in its editing mode by using the property called editingBorderColor. Syntax new fabric.Textbox(text: String, { editingBorderColor: String }: Object) Parameters ...
Read MoreHow to change the font weight of IText using FabricJS?
In this tutorial, we are going to see how to change the font weight 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 IText as ...
Read MoreFabricJS – How to find the real center coordinates of an Image object?
In this tutorial, we are going to learn how to find the real center coordinates of an Image object 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 real center coordinates of an Image object, we use the getCenterPoint method. Syntax getCenterPoint(): fabric.Point Using getCenterPoint Method Let's see a code example to see the logged output when the getCenterPoint method is ...
Read MoreHow to convert JSON data to a html table using JavaScript/jQuery?
JSON (JavaScript Object Notation) is a powerful data format to exchange data between server and client. HTML tables are essential for displaying data in a structured, readable format. Converting JSON data to HTML tables is a common requirement in web development. In this article, we will learn how to convert JSON data into HTML tables using both vanilla JavaScript and jQuery. We'll explore two practical approaches with complete examples. ...
Read MoreFetching odd appearance number in JavaScript
Given an array of integers, we need to find the element that appears an odd number of times. There will always be exactly one such element. We can solve this problem using different approaches. The sorting approach iterates through a sorted array to count occurrences, while XOR provides an elegant mathematical solution. Method 1: Using Sorting This approach sorts the array first, then iterates through it to count consecutive identical elements. const arr = [20, 1, -1, 2, -2, 3, 3, 5, 5, 1, 2, 4, 20, 4, -1, -2, 5]; const findOddSorting = ...
Read MoreConverting a comma separated string to separate arrays within an object JavaScript
When working with comma-separated strings containing hierarchical data, we often need to parse them into structured objects. This article shows how to convert a string like 'dress/cotton/black, dress/leather/red' into an organized object with arrays. The Problem Suppose we have a string like this: const str = 'dress/cotton/black, dress/leather/red, dress/fabric, houses/restaurant/small, houses/school/big, person/james'; We need to create a JavaScript function that converts this into an object where each category becomes a key, and all related values are grouped into arrays: const output = { dress: ["cotton", "black", "leather", "red", "fabric"], ...
Read MoreGet key from value in JavaScript
In JavaScript, finding a key from its corresponding value in an object requires iterating through the object's key-value pairs. Unlike accessing values by keys (which is direct), reverse lookup needs a search operation. Understanding the Problem Given a JavaScript object and a value, we need to find the key that maps to that value. For example: { key1: 'value1', key2: 'value2', key3: 'value3' } If we search for 'value2', we should get 'key2' as the result. Using Object.entries() and find() The most efficient ...
Read MoreComparing integers by taking two numbers in JavaScript
Comparing integers is a fundamental operation in JavaScript programming. This tutorial demonstrates how to compare two integers and determine their relationship using JavaScript's comparison operators. Understanding the Problem Integer comparison involves determining the relationship between two numbers - whether one is greater than, less than, or equal to another. This operation is essential for sorting algorithms, conditional logic, and data validation. For example, comparing 15 and 10 tells us that 15 is greater than 10. Comparison Operators in JavaScript ...
Read MoreLongest string with two distinct characters in JavaScript
We need to write a JavaScript function that finds the longest substring containing at most two distinct characters. The function takes a string as input and returns the length of the longest valid substring. For example, if the input string is 'kjeljsdl', the longest substring with at most 2 distinct characters is 'jljl' with length 4. Understanding the Problem A substring with at most two distinct characters means we can have: Only one character repeated: "aaa" Two different characters in any combination: "abab", "aabb" Sliding Window Approach The most efficient solution uses a ...
Read MoreHow to create a canvas with a help cursor using FabricJS?
In this article, we are going to create a canvas with a help cursor using FabricJS. The question mark in a help pointer indicates that useful information for the user is present. It is also often accompanied by useful links and can be seen while using a new application. help is one of the native cursor style 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., that reuse the native cursor under the hood. Each of these cursors look slightly different based on operating system. ...
Read More