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
FabricJS – How to set the background colour of selection of an Image?
In this tutorial, we are going to learn how to set the background colour of selection of Image 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 set the background colour of Image, we use the selectionBackgroundColor property. Syntax new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { selectionBackgroundColor: String }: Object, callback: function) Parameters ...
Read MoreHow to detect copy paste commands Ctrl+V, Ctrl+C using JavaScript?
You'll learn how to use JavaScript to detect the keystrokes Ctrl+V and Ctrl+C in this article. When a user wishes to paste something into an input field, they have two options: either they can use the context menu by right-clicking on the webpage or they may use their keyboard by pressing the CTRL and V buttons simultaneously. The keydown event's ctrlKey property is used to figure out the key combination that contains "Ctrl." To identify whether "ctrl" is pressed or not during the key event, it produces a "boolean" value. Syntax event.ctrlKey Return Value ...
Read MoreFabricJS – Check if the Cache is Dirty and Renderer is Required for a Polygon?
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. We can check if the cache is dirty and the renderer is required by using the isCacheDirty method. This method checks whether the cache is dirty and thus lets FabricJS know that something in our canvas has changed which requires re-rendering. Syntax isCacheDirty(skipCanvas: ...
Read MoreSort array based on min and max date in JavaScript?
When working with arrays of date strings, you often need to find the oldest (minimum) and newest (maximum) dates. JavaScript provides several approaches to accomplish this task efficiently. const arr = [ "2017-01-22 00:21:17.0", "2017-01-27 11:30:23.0", "2017-01-24 15:53:21.0", "2017-01-27 11:34:18.0", "2017-01-26 16:55:48.0", "2017-01-22 11:57:12.0", "2017-01-27 11:35:43.0" ]; We need to write a JavaScript function that takes such an array, finds the oldest and newest date, and returns an object containing both dates. Using Array.reduce() Method The reduce() method provides an ...
Read MoreShortest distance between objects in JavaScript
In JavaScript, calculating the shortest distance between two objects requires their coordinates and the Euclidean distance formula. This is commonly used in game development, mapping applications, and geometric calculations. Understanding the Problem To find the shortest distance between two objects, we need their position coordinates (x, y). The distance is calculated using the Euclidean distance formula: √[(x₂-x₁)² + (y₂-y₁)²] The Distance Formula The Euclidean distance formula calculates the straight-line distance between two points in a coordinate system: ...
Read MoreGenerating the sequence of first n look and say numbers in JavaScript
Problem In mathematics, the look-and-say sequence is the sequence of integers beginning as follows: 1, 11, 21, 1211, 111221, 312211, ... To generate a member of the sequence from the previous member, we read off the digits of the previous member, counting the number of digits in groups of the same digit. For instance, the next number to 1211 is: 111221 Because if we read the digits of 1211 aloud it will be: One one, one two, two one which gives us 111221 We are required to write a JavaScript ...
Read MoreMaximum length of mountain in an array using JavaScript
A mountain subsequence in JavaScript is a contiguous subarray that first increases then decreases, forming a mountain-like pattern. This article explains how to find the maximum length of such a subsequence. Mountain Subsequence Definition A subarray is considered a mountain if it meets these criteria: Length ≥ 3 elements Elements strictly increase to a peak, then strictly decrease Pattern: sub[0] < sub[1] < ... < sub[i] > sub[i+1] > ... > sub[n-1] Peak ...
Read MoreHow to set the colour of the controlling corners of a Circle using FabricJS?
In this tutorial, we are going to set the colour of controlling corners of Circle using FabricJS. The cornerColor property allows us to manipulate the colour of the controlling corners when the object is active. Syntax new fabric.Circle({ cornerColor: String }: Object) Parameters options (optional) − This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the object of which ...
Read MoreHow to make a Rectangle invisible using FabricJS?
In this tutorial, we are going to learn how to make a Rectangle invisible using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we will have to create an instance of fabric.Rect class and add it to the canvas. Our rectangle object can be customized in various ways like changing its dimensions, adding a background color or by making it visible or invisible. We can do this by using the visible property. Syntax new fabric.Rect({ visible: Boolean }: Object) Parameters ...
Read MoreHow to set the path side in IText using FabricJS?
In this tutorial, we are going to learn about how to set the path side 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 is not true for IText ...
Read More