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 lock the flipping during scaling of Rectangle using FabricJS?
In this tutorial, we are going to learn how to lock the flipping during scaling 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 to stop flipping an object during scaling. This can be done by using the lockScalingFlip property. Syntax new fabric.Rect({ lockScalingFlip : Boolean }: Object) Parameters Options (optional) − This parameter is an Object which provides additional customizations to our rectangle. Using this parameter, properties such as colour, cursor, ...
Read MoreHow to set the size of superscript with Text using FabricJS?
In this tutorial, we are going to learn how to set the size of superscript with Text using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. We can also use the superscript property where we can specify its size. Syntax new fabric.Text(text: String , { superscript : {"size": Number, "baseline": Number}: ...
Read MoreHow to show images with a click in JavaScript using HTML?
To display images on click using JavaScript and HTML, you can create hidden images, add click events, and reveal images dynamically for an interactive user experience. This technique enhances user engagement and improves page load times by showing content only when needed. Users often want to create interactive web pages where images are initially hidden and can be revealed with a click. The challenge is implementing this functionality using JavaScript and HTML in a simple and efficient manner. Approaches to Show Images with a Click Using the Style Display Property Using ...
Read MoreHow to set stroke width of a canvas circle using Fabric.js ?
The stroke and strokeWidth properties are used to set the stroke color and width of a canvas circle in Fabric.js. These properties allow you to customize the border appearance of circle objects. The Fabric.js Circle class provides a rich set of features for creating interactive circles. Unlike basic HTML5 canvas circles, Fabric.js circles are movable, resizable, and highly customizable with properties for stroke, fill, dimensions, and positioning. Syntax fabric.Circle({ radius: number, stroke: string, strokeWidth: number }); Parameters radius − Specifies the radius of the ...
Read MoreSort an array to have specific items first in the array - JavaScript
When working with arrays of objects, you might need to sort them so that items with specific properties appear first. This is a common requirement in applications where you need to prioritize certain elements while maintaining the original order of others. Suppose we have an array of objects like this: const arr = [ {flag: true, other: 1}, {flag: true, other: 2}, {flag: false, other: 3}, {flag: true, other: 4}, {flag: true, other: 5}, ...
Read MoreHow to change the color of a button when the input field is filled – JavaScript?
In JavaScript, you can change a button's color dynamically when an input field is filled by using event listeners and checking the input's value. This creates an interactive user interface that responds to user input in real-time. Basic HTML Structure First, let's set up the HTML elements we'll be working with: Press Me Using onkeyup Event The onkeyup event triggers every time a key is released in the input field, allowing us to check the input's value and update the button color accordingly. ...
Read MoreForm a sequence out of an array in JavaScript
When working with sorted arrays containing consecutive numbers, we often need to represent sequences in a compressed format. Instead of listing all consecutive numbers, we can show ranges using a dash (-) separator. For example, instead of [1, 2, 3, 5, 7, 8, 9, 11], we want to display "1-3, 5, 7-9, 11". Problem Statement Given a sorted array of numbers, we need to: Group consecutive numbers into ranges (e.g., 1, 2, 3 becomes "1-3") Keep standalone numbers as-is Join all parts with commas const arr = [1, 2, 3, 5, 7, 8, ...
Read MoreAre mean mode of a dataset equal in JavaScript
We are required to write a JavaScript function that takes in an array of numbers and checks if the mean and mode are equal. The function should calculate both statistical measures and return true if they match, false otherwise. For example − If the input array is − const arr = [5, 3, 3, 3, 1]; Then the output for this array should be true because both the mean and mode of this array are 3. Understanding Mean and Mode The mean is the average of all numbers in the dataset. The ...
Read MoreCan all array elements mesh together in JavaScript?
Two words can mesh together if the ending substring of the first word is the starting substring of the second word. For instance, "robinhood" and "hoodie" can mesh together because "hood" appears at the end of "robinhood" and at the start of "hoodie". We need to write a JavaScript function that takes an array of strings and checks if all consecutive words mesh together. If they do, the function returns the meshed letters as a string, otherwise it returns an empty string. How It Works The solution uses a regular expression to find overlapping substrings between consecutive ...
Read MoreSumming cubes of natural numbers within a range in JavaScript
Problem We are required to write a JavaScript function that takes in a range array of two numbers. Our function should find the sum of all the cubes of the numbers that falls in the specified range. Understanding the Problem Given a range [a, b], we need to calculate a³ + (a+1)³ + (a+2)³ + ... + b³. For example, with range [4, 11], we calculate 4³ + 5³ + 6³ + 7³ + 8³ + 9³ + 10³ + 11³. Solution Using For Loop Here's the implementation that iterates through the range and sums the cubes: const range = [4, 11]; const sumCubes = ([l, h]) => { const findCube = num => num * num * num; let sum = 0; for(let i = l; i
Read More