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 horizontal scaling of a Circle using FabricJS?
In this tutorial, we are going to learn how to lock the horizontal scaling of a Circle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a circle 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.Circle({ lockScalingX : Boolean }: Object) Parameters options (optional) − This parameter is an Object which provides additional customizations to our circle. ...
Read MoreHow to hide the controlling corners of a Triangle using FabricJS?
In this tutorial, we are going to learn how to hide the controlling corners 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 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 its size, etc. We can also hide them using the hasControls ...
Read MoreHow to get the current colour of the character at cursor in IText using FabricJS?
In this tutorial, we are going to learn about how to get the current colour of the character at cursor in 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 ...
Read MoreDesign a Digital Clock in Neumorphism Style using JavaScript
In this tutorial, we will be discussing how to design a digital clock in neumorphism style using JavaScript. Neumorphism is a design trend characterized by soft, raised elements with subtle shadows that create an embossed or pressed effect on the interface. HTML Structure Let's start by creating the basic HTML structure for our neumorphic digital clock. We need a container for the clock and display elements. Neumorphic Digital Clock ...
Read MoreHow to create 3D Geometries in webGL and p5.js?
Creating 3D geometries in WebGL and p5.js enables developers to build interactive and visually compelling web applications. With built-in functions for basic shapes, texture mapping, and transformations, both libraries provide powerful tools for 3D graphics development. Understanding WebGL vs p5.js for 3D Graphics WebGL is a low-level graphics API that provides direct access to the GPU, while p5.js offers a higher-level, artist-friendly interface. For complex 3D applications, Three.js (built on WebGL) is often preferred, whereas p5.js excels in creative coding and educational contexts. Creating Basic 3D Shapes Using Three.js (WebGL-based) Three.js simplifies WebGL by providing ...
Read MoreCenter of each side of a polygon in JavaScript
In JavaScript, finding the center (midpoint) of each side of a polygon involves calculating the average coordinates between consecutive vertices. This is useful in computational geometry for polygon analysis and graphics applications. Problem Definition Given an array of coordinate pairs representing polygon vertices, we need to find the midpoint of each side. Each side connects two consecutive vertices, and the last vertex connects back to the first vertex to close the polygon. // Example polygon coordinates (longitude, latitude) const polygonVertices = [ [-73.9280684530257, 40.8099975343718], [-73.9282820374729, 40.8100875554645], ...
Read MoreGet all substrings of a string in JavaScript recursively
In JavaScript, generating all substrings of a string can be elegantly solved using recursion. A substring is any continuous sequence of characters within a string. For example, the string "abc" has substrings: "a", "b", "c", "ab", "bc", and "abc". Understanding the Problem We need to create a recursive function that generates all possible substrings of a given input string. For the string "xy", the possible substrings are "x", "y", and "xy". The recursive approach systematically explores all starting and ending positions to build each substring. Algorithm Steps Step 1 − Define the main function that accepts ...
Read MoreFinding sum of alternative elements of the array in JavaScript
We are required to write a JavaScript function that takes in an array of Numbers as the only argument. The function should calculate and return the sum of alternative elements of the array. For example − If the input array is − const arr = [1, 2, 3, 4, 5, 6, 7]; Then the output should be − 1 + 3 + 5 + 7 = 16 Method 1: Using for Loop with Index Check This approach uses a for loop and checks if the index is even to ...
Read MoreCounting n digit Numbers with all unique digits in JavaScript
We need to write a JavaScript function that counts all n-digit numbers where every digit appears exactly once (all digits are unique). Problem Statement Given a number num, find how many numbers exist with exactly num digits where all digits are unique. For example: 1-digit numbers: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 → Count = 10 2-digit numbers: 10, 12, 13, ..., 98 (excluding 11, 22, 33, etc.) → Count = 91 Understanding the Logic This is a combinatorics problem: 1-digit: All 10 digits (0-9) are valid 2-digit: ...
Read MoreHow to lock the horizontal skewing of Circle using FabricJS?
In this tutorial, we are going to learn how to lock the horizontal skewing of a Circle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a circle object in the canvas, we can also specify whether we want to stop skewing an object horizontally. This can be done by using the lockSkewingX property. Syntax new fabric.Circle({ lockSkewingX : Boolean }: Object) Parameters options (optional) − This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, ...
Read More