In programming, shadowing occurs when a variable declared in a certain scope (e.g. a local variable) has the same name as a variable in an outer scope (e.g. a global variable). When this happens, the outer variable is said to be shadowed by the inner variable. In JavaScript, variables can be shadowed in both the global and function scope. Global variables can be shadowed by function-scoped variables, and function-scoped variables can be shadowed by block-scoped variables declared with the let or const keyword. Variable Shadowing in the Global Scope In the global scope, shadowing occurs when a variable declared with ... Read More

An infix to Postfix converter is a tool that converts an infix expression to a postfix expression. In this tutorial, we will build the infix to postfix converter using JavaScript. What is an infix expression? Infix expression is an expression in which the operators are between the operands. For example, the expression "3 + 4" is an infix expression. What is a postfix expression? A postfix expression is an expression in which the operators are after the operands. For example, the expression "3 4 +" is a postfix expression. How does the Infix to Postfix converter work? The converter first ... Read More

In this tutorial, we'll be implementing a queue using only two stacks. This is a pretty common interview question so it's good to know how to do it. Algorithm STEP 1 − We have two stacks, one for enqueueing and one for dequeueing. STEP 2 − We enqueue by pushing onto the enqueue stack. STEP 3 − We dequeue by popping from the dequeue stack. STEP 4 − If the dequeue stack is empty, we pop everything from the enqueue stack and push it onto the dequeue stack. STEP 5 − This reverses the order so that ... Read More

In JavaScript, a predicate function is a function that returns a Boolean value. In other words, it is a function that tests whether a certain condition is true or false.There are times when we need to negate a predicate function. That is, we need to return the opposite Boolean value.There are several ways to negate a predicate function in JavaScript.Using the ! operatorThe most common way to negate a predicate function is to use the ! operator.For example, consider the following predicate function −function isEven(num) {    return num % 2 === 0; }To negate this function, we can use ... Read More

JavaScript has a built-in function called replace() that can be used to replace characters in a string. This function takes two arguments: the first argument is the character or characters to be replaced, and the second argument is the character or characters to replace them with. Syntax Following is the syntax to replace characters except last with a specified mask − str.replace(/.(?=.)/g, "x"); The first argument to the replace() method is character/s to be replaced. We pass a regular expression for all characters except last as the first argument to the replace method. All characters except the last are ... Read More

The Fullscreen API is a browser API that allows developers to request fullscreen display from the user, and to exit fullscreen when desired. Using the Fullscreen API is relatively simple. First, you must check if the browser you are using supports the Fullscreen API. You can do this by checking for the presence of the Fullscreen API's enabled property on the document object. If the browser does not support the Fullscreen API, you can still provide a fullscreen experience to your users by using another method, such as opening a new browser window. Assuming the browser does support the Fullscreen ... Read More

With a little bit of JavaScript and DOM manipulation, you can create all sorts of interesting patterns on a webpage. In this tutorial, we'll show you how to create a chessboard pattern using JavaScript and the DOM.ApproachSTEP 1 − We start by creating a element with an id of "chessboard". This will be the element that contains our chessboard pattern.STEP 2 − We create a element that sets the width and height of the #chessboard div to 400px. We also create a class called .chess-square that sets the width and height of elements to 50px and floated to ... Read More

In this tutorial, we are going to learn how to set the width of a Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. However, one of the fundamental properties of textbox is width which specifies the horizontal width of the textbox. Syntax new fabric.Textbox(text: String, { width: Number }: Object) Parameters text − This parameter accepts a String which is the text string that we want to display ... Read More

In this tutorial, we are going to learn how to set the vertical scale factor of a Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. Just as we can specify the position, colour, opacity and dimension of a textbox object in the canvas, we can also set the vertical scale factor of a textbox object. This can be done by using the scaleY property. Syntax new fabric.Textbox(text: String, { scaleY ... Read More

In this tutorial, we are going to learn how to set the style of controlling corners of Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. The controlling corners of an object allow us to 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 change the style by using the cornerStyle ... Read More