Learn how to improve the performance of rendering in canvas by using OffscreenCanvas

The OffscreenCanvas interface allows canvas rendering contexts (2D and WebGL) to be used in Workers. It increases parallelism in the web, leading to improved performance on multi-core systems.

Using OffscreenCanvas we can render a canvas in the worker thread so that the main thread will be undisturbed so that our web app will work smoothly.

The support of OffscreenCanvas across the browser can be found here CanIUse.

There are two ways we can use OffscreenCanvas

1. Creating an OffscreenCanvas from existing canvas
2. Creating an OffscreenCanvas manually and render…

Learn how to use preventExtensions to stop adding new properties to a JavaScript Object

The Object.preventExtensions() method prevents new properties from added to an object.

In the above code, after calling preventExtensions on the user object, when we try to add age property JavaScript will thow TypeError .

• preventExtensions method returns the object being made non-extensible.
• There is no way to make an object extensible again once it has been made non-extensible.
• To check if the object is non-extensible we can use Object.isExtensible()

• preventExtensions()method only prevents addition of own properties. …

Understanding the Split Method in JavaScript

The split method spilt the string into array of substring based on the pattern provided.

Example

let numbersStr = "1,2,3,4,5";let numArray = numbersStr.split(",");console.log(numArray); // ["1","2","3","4","5"]

In the above example , the split method will loop through all the character of the string , if the pattern provided is found then the split method will collect the characters looped before finding the pattern and join all the characters as a string and pushed that string into an array .

If we don’t pass any pattern then the entire string will be pushed to an…

What Is XMLHttpRequest (XHR)?

• XMLHttpRequest is an in-built JavaScript object that is used to transfer data between a server and a client without refreshing the whole page.
• Bu using XHR we can update the page based on the user action.
• For example, an infinite news feed. (Once the user scrolls down to the end of the page, we make a request to fetch the next article and append the data to the page).
• Using XHR, we can make both synchronous and asynchronous requests.

Steps to Make a Request Using XMLHttpRequest

• Create an XMLHttpRequest object.
• Configure the object with request details .
• Send request.

1. Create a XMLHttpRequest object

let request = new XMLHttpRequest();

2. Configure the object with request details

To configure the…

Learn to check if the primitive value or object present in an array in JavaScript

Checking if a primitive value present in an array

You can use

• indexOf
• includes
• Using normal For loop

method to check if a primitive value present in an array, Consider we have an array

var num = [1,2,3,4,5];

indexOf

The indexOf() method returns the first index of the element in the array, if the searching element is not present in the array then it returns -1 .

num.indexOf(3); // 2num.indexOf(6); //-1num.indexOf('3'); // -1

The NaN value is not handled in indexOf method.

var array = [NaN];array.indexOf(NaN); // -1

If your array can…

Requesting donation for my Badminton Training.

Hello Reader, My name is Jagathish Saravanan, I am from India. I am currently working as a Web developer , I love my Job , but once I started playing Badminton , I started loving Badminton more that anything , So I have decided to switch my carrer to Badminton, It is hard to manage my training expense , so I started writing Blog in Medium . But medium partner program is not supported in India. So I am requesting you to donate some amount .

You can donate me in PayPal :

https://paypal.me/jagathishSaravanan?locale.x=en_GB

Google pay: 8015851838.

Thank you so much for your time

Different ways to empty array in JavaScript

Learn how to load script in HTML

Console cheat sheet for JavaScript developers

Find the difference between Dates in JavaScript

Renaming Git Branch

Remove last character of String in JavaScript

Convert Object to HTML table in JavaScript

Random Hex Colour Generator in JavaScript

Replacing Switch statement with objects

These are the articles that are freshly created this week. I hope you like this

Detect network online/offline State using JavaScript

One-Time Event Listener in JavaScript

Asynchronous Image Loading in JavaScript

Difference between append and appendChild method

Inserting elements in JavaScript Array

Implement and, or logical function in JavaScript

Remove all Children of an DOM Node in JavaScript