Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance
Drawing part of an image in HTML5 canvas is useful for creating sprites, animations, or displaying specific portions of larger images. The key is using the extended drawImage() method with clipping parameters. Syntax context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); Parameters Parameter Description sx, sy Starting coordinates in source image sWidth, sHeight Width and height of clipped area in source dx, dy Destination coordinates on canvas dWidth, dHeight Size to draw on canvas Example: Drawing Part of an Image ... Read More
The tree data structure represents hierarchical relationships like organization charts, file systems, and DOM elements. A tree consists of nodes connected in a parent-child relationship, where each node has a value and references to its children, with no duplicate references. Tree Terminology Understanding key tree terms is essential: Root: The top node with no parent Parent: A node that has children Child: A node connected to a parent above it Leaf: A node with no children Height: Maximum depth from root to any leaf Depth: Number of edges from root to a specific node ... Read More
The location.protocol property in JavaScript returns the protocol scheme of the current webpage's URL, including the colon (:). It's a read-only property that helps identify whether a page is served over HTTP, HTTPS, or other protocols. Syntax location.protocol Return Value Returns a string representing the protocol scheme, including the trailing colon. For example: "https:", "http:", "file:", etc. Common Protocol Values http: − Hypertext Transfer Protocol (unsecured) https: − Hypertext Transfer Protocol Secure (secured with SSL/TLS) file: − Local file system access ... Read More
Yes, it is possible to destructure to already-declared variables in JavaScript. However, you must wrap the destructuring assignment in parentheses to avoid syntax errors. The Problem When variables are already declared, JavaScript cannot distinguish between a block statement and destructuring assignment: Destructuring Problem let name, age; ... Read More
In JavaScript, you can create a dictionary (object) where all keys map to the same value using several approaches. This is useful when you need to initialize multiple properties with identical values. Method 1: Using a for...of Loop The most straightforward approach is to iterate through an array of keys and assign the same value to each: const keys = ['Name1', 'Name2', 'Name3']; const dictionary = {}; for (const key of keys) { dictionary[key] = 'John'; } console.log(dictionary); { Name1: 'John', Name2: 'John', Name3: 'John' } ... Read More
We are required to write a JavaScript function that takes a string and returns an object representing the frequency distribution of each character in the string. const str = 'This string will be used to calculate frequency distribution'; We need to return an object that represents the frequency distribution of various characters present in the string. Example Following is the code: const str = 'This string will be used to calculate frequency distribution'; const frequencyDistribution = str => { const map = {}; ... Read More
We are required to write a JavaScript function that takes in an array and a number n. Our function should rotate the array by n elements, i.e., take n elements from the front and put them to the end. The only condition here is that we have to do this without using any extra space in memory. For example, if the input array is: const arr = [12, 6, 43, 5, 7, 2, 5]; and number n is 3, then the output should be: const output = [5, 7, 2, 5, ... Read More
When a user copies an element's content, the oncopy event triggers in JavaScript. This event fires when the user performs a copy operation using Ctrl+C, right-click copy, or any other method to copy selected content. Syntax element.oncopy = function() { // Code to execute when content is copied }; // Or using addEventListener element.addEventListener('copy', function() { // Code to execute when content is copied }); Example: Basic oncopy Event ... Read More
The oncanplaythrough event fires when the browser estimates it can play the video through to the end without stopping for buffering. This is useful for ensuring full video preload before playback. Understanding canplaythrough Event The canplaythrough event indicates the browser has buffered enough data to play the entire video without interruption. This differs from canplay, which only ensures playback can start. Example: Basic Video Preload Detection Video Preload Example ... Read More
When working with HTML5 canvas rotation, detecting the correct coordinates of points becomes challenging because the canvas coordinate system changes. This article shows how to create a transform class to handle point detection after canvas rotation. The Problem When you rotate a canvas, the coordinate system rotates with it. A point at (5, 6) on the original canvas will have different coordinates after rotation. You need to transform these coordinates to match the rotated canvas. Creating a Transform Class Here's a complete Transform class that handles canvas rotations and point transformations: ... Read More