Articles on Trending Technologies

Technical articles with clear explanations and examples

Create a text inside circles in HTML5 Canvas

Nishtha Thakur
Nishtha Thakur
Updated on 15-Mar-2026 1K+ Views

To create text inside circles in HTML5 Canvas, you need to draw a circle first using context.arc(), then add text at the center using context.fillText(). This technique is useful for creating badges, labels, or interactive elements. Basic Approach The process involves three main steps: Draw a circle using beginPath() and arc() Fill the circle with a background color Add centered text with contrasting color Example: Static Circle with Text var canvas = document.getElementById('canvas1'); var context = canvas.getContext('2d'); // Draw circle context.beginPath(); context.fillStyle = "blue"; context.arc(100, 100, 30, 0, ...

Read More

The Keys and values method in Javascript

Samual Sam
Samual Sam
Updated on 15-Mar-2026 303 Views

JavaScript provides several methods to extract keys and values from objects and Maps. The most common approaches are Object.keys(), Object.values() for plain objects, and the keys(), values() methods for ES6 Maps. Getting Keys from Objects Use Object.keys() to extract all property names from an object as an array: const myObject = { key1: "value1", key2: "value2", key3: "value3" }; const keys = Object.keys(myObject); console.log(keys); [ 'key1', 'key2', 'key3' ] Getting Values from Objects Object.values() extracts all property ...

Read More

How to create a unique ID for each object in JavaScript?

AmitDiwan
AmitDiwan
Updated on 15-Mar-2026 1K+ Views

In JavaScript, creating unique IDs for objects is essential for tracking and identifying instances. The most reliable method is using Symbol(), which generates guaranteed unique identifiers. Using Symbol() for Unique IDs The Symbol() function creates a unique symbol every time it's called, even with the same description. This makes it perfect for generating unique object identifiers. Unique Object IDs body { ...

Read More

Remove values in an array by comparing the items 0th index in JavaScript?

AmitDiwan
AmitDiwan
Updated on 15-Mar-2026 311 Views

When working with arrays of sub-arrays, you may need to remove duplicates based on the first element (0th index) of each sub-array. This is common when dealing with data like subject-marks pairs where you want only unique subjects. Let's say the following is our array: var subjectNameAlongWithMarks = [ ["JavaScript", 78], ["Java", 56], ["JavaScript", 58], ["MySQL", 77], ["MongoDB", 75], ["Java", 98] ]; console.log("Original array:", subjectNameAlongWithMarks); Original array: [ ...

Read More

Figuring out the highest value through a for in loop - JavaScript

AmitDiwan
AmitDiwan
Updated on 15-Mar-2026 177 Views

When working with comma-separated strings in JavaScript, you might need to find which value appears most frequently. This tutorial demonstrates how to use a for-in loop to count occurrences and determine the most frequent item. Suppose we have a comma-separated string containing fruit names: const str = 'Banana, Banana, Pear, Orange, Apple, Melon, Grape, Apple, Banana, Grape, Melon, Grape, Melon, Apple, Grape, Banana, Orange, Melon, Orange, Banana, Banana, Orange, Pear, Grape, Orange, Orange, Apple, Apple, Banana'; console.log(str); Banana, Banana, Pear, Orange, Apple, Melon, Grape, Apple, Banana, Grape, Melon, Grape, Melon, Apple, Grape, Banana, Orange, ...

Read More

How to set the amount by which the border image area extends beyond the border box with JavaScript?

Shubham Vora
Shubham Vora
Updated on 15-Mar-2026 238 Views

In this tutorial, we will learn how to set the amount by which the border image area extends beyond the border box in JavaScript. To set the amount by which the border image is extended, you need to set the border outside edges. To do this we can apply the borderImageOutset style property provided in JavaScript. After creating a border image area for the HTML element, we might have to increase the area. By knowing a method to increase the border image area more than the border box, we can make the change without writing lengthy code. Using ...

Read More

How to set the margins of an element with JavaScript?

Swarali Sree
Swarali Sree
Updated on 15-Mar-2026 340 Views

Use the margin property in JavaScript to set the margins of an element. You can access this through the element's style object to modify margins dynamically. Syntax element.style.margin = "value"; element.style.marginTop = "value"; element.style.marginRight = "value"; element.style.marginBottom = "value"; element.style.marginLeft = "value"; Setting All Four Margins You can set all margins at once using the shorthand margin property with space-separated values: Set All Margins This text will have its margins changed. ...

Read More

HTML5 appcache with Safari causing cross-site css to not load correctly

Anvi Jain
Anvi Jain
Updated on 15-Mar-2026 232 Views

HTML5 AppCache was designed to enable offline web applications by caching specific resources. However, Safari's strict implementation can cause cross-site CSS files to fail loading when not properly configured in the cache manifest. The Safari AppCache Issue Safari follows the AppCache standard more strictly than other browsers. When a cache manifest is present, Safari blocks any network requests to resources not explicitly listed in the manifest file, including cross-site CSS files. Understanding the Problem When you have a cache manifest like this: CACHE MANIFEST # Version 1.0 CACHE: /styles/main.css /scripts/app.js /index.html ...

Read More

Clearing a Dictionary using Javascript

Monica Mona
Monica Mona
Updated on 15-Mar-2026 2K+ Views

In JavaScript, dictionaries can be implemented using plain objects or ES6 Maps. Both approaches provide methods to clear all key-value pairs from the container. Clearing Custom Dictionary Objects For custom dictionary implementations using plain objects, you can create a clear() method that resets the container: clear() { this.container = {} } Example with Custom Dictionary class MyMap { constructor() { this.container = {}; } ...

Read More

How to access an object through another object in JavaScript?

AmitDiwan
AmitDiwan
Updated on 15-Mar-2026 540 Views

In JavaScript, you can access properties and methods of one object from another object by referencing them directly. This technique is useful for sharing data between objects or creating relationships. Basic Property Access The simplest way is to reference properties directly from another object: Object Access Example CLICK HERE // First object with properties and method let obj = { firstName: "Rohan", lastName: "Sharma", welcome() { ...

Read More
Showing 18011–18020 of 61,297 articles
Advertisements