Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance
In this article, we are going to create a canvas with a progress cursor on hover using FabricJS. The progress cursor is one of the native cursor styles available which can be used in the FabricJS canvas too. FabricJS provides various types of cursors such as default, all-scroll, crosshair, col-resize, row-resize, etc. that reuse the native cursor under the hood. The hoverCursor property sets the style of the cursor when hovered over a canvas object. Syntax new fabric.Canvas(element: HTMLElement|String, { hoverCursor: String }: Object) Parameters ... Read More
In JavaScript, when working with inheritance, you often need to call the parent class constructor from the child class. This is accomplished using the super() method, which provides access to the parent's constructor and methods. What is a Constructor? A constructor is a special method that runs when creating a new instance of a class. It's used to initialize object properties and set up the object's initial state. In JavaScript, constructors are defined using the constructor keyword within a class. Inheritance in JavaScript Inheritance allows objects to access properties and methods from parent objects. Child classes ... Read More
In this tutorial, we are going to set the scale factor (border) of 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. We can use the borderScaleFactor property which specifies the scale factor of objects controlling borders. Syntax new fabric.Circle({ borderScaleFactor: Number }: Object) Parameters options (optional) − This parameter is an Object which provides additional customizations to ... Read More
In this tutorial, we are going to learn how to set the width 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. We can manipulate a triangle object by changing its position, opacity, stroke and also its dimension. FabricJS allows us to control an object's dimensions by using the width and height properties. Syntax new fabric.Triangle({ width: Number }: Object) Parameters ... Read More
In JavaScript, a function is considered "curried" if it takes one or more arguments and returns a new function that expects the remaining arguments. Currying is a powerful technique that can be used to create new functions from existing ones, or to "uncurry" a function up to depth n. Why do we uncurry a function? There are several reasons why you might want to uncurry a function. For example, you may want to − Use a curried function in a context where a non-curried function is expected Convert ... Read More
In this tutorial, we are going to learn how to exclude Line object from being saved while using JSON.stringify() in FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. Serialization is used in order to export canvas contents. In order to achieve this we use toObject() ... Read More
In JavaScript, the await keyword can only be used inside async functions. However, there are several techniques to work with asynchronous code when you need to use await at the top level or outside of async functions. Here, we will learn different approaches to handle asynchronous operations outside of regular async functions. Using Immediately Invoked Function Expression (IIFE) The most common approach is to wrap your code in an immediately invoked async function expression. This allows you to use await within the function scope. Syntax (async () => { let ... Read More
In this article, you will learn how to calculate the days remaining until the next Christmas using JavaScript. We'll use the Date object to work with dates and perform time calculations to determine how many days are left until December 25th. Understanding the Logic To calculate days until Christmas, we need to: Get today's date Determine the next Christmas date (this year or next year) Calculate the time difference in milliseconds Convert milliseconds to days Method 1: Direct Calculation In this approach, we calculate the time difference without using functions: let todayDate ... Read More
To sort an array of integers correctly in JavaScript, use the sort() method with a comparison function. Without a comparison function, sort() converts numbers to strings, causing incorrect ordering. The Problem with Default sort() JavaScript's default sort() method converts elements to strings and sorts alphabetically, which doesn't work correctly for numbers: var numbers = [10, 2, 100, 5]; console.log("Default sort:", numbers.sort()); Default sort: [ 10, 100, 2, 5 ] Correct Integer Sorting Use a comparison function that returns the difference between two numbers: var arrayOfIntegers = [67, 45, ... Read More
Let us learn about "how to replace spaces with underscores in JavaScript". This is a useful technique for formatting strings that contain multiple words, commonly used for URL slugs, file names, and database fields. We'll explore different methods to achieve this transformation and discuss their use cases and performance considerations. JavaScript provides several built-in methods to replace spaces with underscores. Here are the most commonly used approaches: replace() method with regular expressions replaceAll() method split() and join() methods Using replace() Method ... Read More