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 tutorial, we are going to create a Rectangle with border colour 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. Since FabricJS is extremely flexible, we are allowed to customize our rectangle object in any way we like. One of the properties that FabricJS provides is borderColor which allows us to manipulate the colour of the border when our object is active. Syntax new fabric.Rect({ borderColor: String }: Object) ... Read More
In this tutorial, we are going to learn how to make the controlling corners of Text transparent 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. The transparentCorners property allows us to make the controlling corners of Text object transparent. Syntax new fabric.Text(text: String, { transparentCorners: Boolean }: Object) ... Read More
The popularity of HTML5 Canvas elements is well-known, as they allow web developers to create animations, full-fledged applications, and interactive charts. However, working with canvas can be challenging, especially for developers coming from a Flash animation background. In this tutorial, we will explore the Easel.js library, which simplifies working with HTML5 Canvas elements. The syntax of Easel.js is similar to ActionScript and includes familiar features like Display List, Stage, and Graphics, making canvas development more accessible for Flash developers. Installing Easel.js The first step is to import Easel.js into your project. The easiest way is using the ... Read More
We can create previous and next buttons that are disabled at their end positions using vanilla JavaScript. JavaScript allows us to control and manipulate DOM elements easily. Here, we will create navigation buttons and change an HTML element's content depending on which button is clicked. Example 1: Counter with Disabled States In this example, we will create "Next" and "Previous" buttons that increment and decrement a counter. The buttons will be disabled when they reach their extreme positions (0 for Previous and 5 for Next). Previous and Next Buttons with ... Read More
We are required to write a JavaScript function that takes in an array of positive as well as negative Numbers and changes the positive numbers to corresponding negative numbers and the negative numbers to corresponding positive numbers in place. Example The code for this will be − const arr = [12, 5, 3, -1, 54, -43, -2, 34, -1, 4, -4]; const changeSign = arr => { arr.forEach((el, ind) => { arr[ind] *= -1; }); }; changeSign(arr); console.log(arr); ... Read More
In JavaScript, you can detect clicks inside or outside multiple divs using event listeners and the contains() method. This is useful for dropdowns, modals, or interactive UI components. The Problem When working with multiple divs, you need to determine if a click event occurred inside any of the target divs or outside all of them. This requires checking the event target against all div elements. Solution Using Event Delegation Add a single event listener to the document and check if the clicked element is contained within any target div: ... Read More
We need to write a JavaScript function that takes an array of strings and a single character, then returns true if the character exists in any string within the array, false otherwise. Problem Overview The function should search through each string in the array to find if the specified character exists anywhere. This is a common pattern for filtering or validation tasks. Example Implementation Here's how to implement this search functionality: const arr = ['first', 'second', 'third', 'last']; const searchForLetter = (arr = [], letter = '') => { ... Read More
The Caesar Cipher algorithm is one of the simplest and most widely known encryption techniques. It is a type of substitution cipher in which each letter in the plaintext is replaced by a letter some fixed number of positions down the alphabet. For example: With a left shift of 3, D would be replaced by A, E would become B, and so on. We need to write a JavaScript function that takes in a string to be encrypted as the first argument and a shift amount as the second argument. The shift amount can be a positive or ... Read More
We are required to write a JavaScript function that takes in an array of strings as the only argument. The function is supposed to return an array of arrays of all the index pairs joining the strings at which yields a new palindrome string. For example, if the input to the function is: const arr = ['tab', 'cat', 'bat']; Then the output should be: [[0, 2], [2, 0]] Output Explanation Because both the strings 'battab' and 'tabbat' are palindromes when we join: arr[0] + arr[2] ... Read More
We are required to write a JavaScript function that takes in a number n. Our function should construct and return an array of N * N order (2-D array), in which the 1s take all the spiralling positions starting from [0, 0] and all the 0s take non-spiralling positions. Therefore, for n = 5, the output will look like: [ [ 1, 1, 1, 1, 1 ], [ 0, 0, 0, 0, 1 ], [ 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 1 ], ... Read More