How to check the OffscreenCanvas is supported by the Browser or not in JavaScript?

Javascript Web Development Front End Technology

In HTML, Canvas is very important when we want to show animation or 3D objects on the webpage using only HTML and JavaScript.

The offscreenCanvas allows users to render the animations and graphics off-screen. It means when we use the canvas, it interacts with the user via the main thread of the web application, but offscreenCanvas doesn’t. So, we can improve the performance of the application using offscreenCanvas .

Before we use offscreenCanvas with any browser, we need to check if it is supported by the Browser or not; Otherwise, we need to use canvas.

So, we will learn two approaches to check whether offscreenCanvas is supported.

Approach 1: Using the typeof operator

The typeof operator allows developers to check the type of variable in JavaScript. Here, we will check the type of offscreenCanvas . If the type of the offscreenCanvas is undefined in the particular Browser, that means that Browser does not support it

Syntax

Users can follow the syntax below to check if the browser supports the offscreenCanvas or not using the typeof operator −

if (typeof OffscreenCanvas === "undefined") {
   // not supported
} else {
   // supported
}

In the above syntax, we have used the offscreenCanvas as an operand of the typeof operator.

Example

In the example below, when the user clicks the button, it invokes the isSupported() function. The isSupported() function uses the typeof operator to get the type of the offscreenCanvas in the particular browser and the if-else statement to check if it's undefined or something else.

<html>
<body>
   <h3>Using the <i> typeof </i> operator to check if OffscreenCanvas is supported by Browser or not</h3>
   <button onclick = "isSupported()"> Check OffscreenCanvas is supported </button>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      function isSupported() {
         if (typeof OffscreenCanvas === "undefined"){
            output.innerHTML +=
            "The OffscreenCanvas in this browser is not supported!";
         } else {
            output.innerHTML +=
            "The OffscreenCanvas in this browser is supported!";
         }
      }
   </script>
</body>
</html>

Approach 2: Using the transferControlToOffscreen function of the canvas

We can create a simple canvas in HTML. After that, if we wanted to use the OffScreenCanvas, we needed to invoke the transferControlToOffscreen() function. If OffScreenCanvas is supported in the browser, every property and method of OffScreenCanvas is also supported.

So, we will check the type of transferControlToOffscreen() function, and if it returns the “function”, it means the browser supports OffScreenCanvas.

Syntax

Users can follow the syntax below to check if OffScreenCanvas is supported by the browser by checking the type of the transferControlToOffscreen() function.

// Creating the canvas element
var canvas_sample = document.createElement("canvas");
if (typeof canvas_sample.transferControlToOffscreen !== "function") {
   //Browser doesn't support OffScreenCanvas
} else {
   //Browser supports OffScreenCanvas
}

In the above syntax, we have created the canvas element and accessed the transferControlToOffscreen() by taking it as a reference and checking its type.

Example

In this example, we have used the createElement() method of JavaScript to create a canvas_sample element. After that, we used the transferControlToOffscreen() canvas method as an operand of the typeof operator to check its type.

Users can observe in the output that, OffScreenCanvas is supported in the Chrome browser, and it returns the “function” as a type of transferControlToOffscreen() method.

<html>
<body>
   <h3>Using the <i> transferControlToOffscreen </i> function to check if OffScreenCanvas is supported by Browser or not  </h3>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      function isSupported() {
         var canvas_sample = document.createElement("canvas");

         if (typeof canvas_sample.transferControlToOffscreen !== "function") {
            output.innerHTML +=
            "The OffScreenCanvas in this browser is not supported!";
         } else {
            output.innerHTML +=
            "The OffScreenCanvas in this browser is supported!";
         }
      }
      isSupported();
   </script>
</body>
</html>

Users learned two approaches to check if the browser supports OffScreenCanvas or not. However, we have used the typeof operator in both approaches. Still, we check the type of OffScreenCanvas in the first approach and the type of transferControlToOffscreen() function in the second approach.