How to check the OffScreenCanvas is supported by the Browser or not ?

Last Updated : 24 Oct, 2019

The OffscreenCanvas is an interface that provides a canvas to rendered off-screen. This feature may not be supported in all browsers. The support for OffscreenCanvas can be checked using two approaches:

Method 1: Checking if OffscreenCanvas exists: The typeof operator is used to return a string of the type of the operand. The OffscreenCanvas object can be tested if it is supported by the browser by using this operator. This operator returns ‘undefined’ if an object does not exist.
The OffscreenCanvas object is compared with the ‘undefined’ string to see if it exists. This statement returns true if the object is defined. It means that OffscreenCanvas is supported by the browser.

Syntax:

if (typeof OffscreenCanvas !== "undefined") { 
    isSupported = true; 
} else { 
    isSupported = false; 
} 

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to check the OffScreenCanvas 
        is supported by the Browser or not? 
    </title> 
</head> 
  
<body> 
    <h1 style="color: green"> 
        GeeksforGeeks 
    </h1> 
      
    <b> 
        How to check the OffScreenCanvas is 
        supported by the Browser or not? 
    </b> 
      
    <p> 
        Click on the button to check 
        for OffscreenCanvas support 
    </p> 
      
    <p> 
        OffscreenCanvas is supported:  
        <span class="output"></span> 
    </p> 
      
    <button onclick="checkOffscreenCanvas()"> 
        Check for OffscreenCanvas 
    </button> 
      
    <script type="text/javascript"> 
        function checkOffscreenCanvas() { 
            if (typeof OffscreenCanvas !== "undefined") { 
                isSupported = true; 
            } else { 
                isSupported = false; 
            } 
            document.querySelector(".output").textContent 
                        = isSupported; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking the button:
After clicking the button:

Method 2: Checking is transferControlToOffscreen method is a function: The transferControlToOffscreen is used to transfer the control of the canvas to an OffscreenCanvas object.
This function is used for the initialization of the OffscreenCanvas. It can be tested if it is defined by using typeof operator with the strict equality (===) operator and checking against the string ‘function’. This statement returns true if the function is defined, which means that OffscreenCanvas is supported by the browser.

Syntax:

let canvasObj = document.createElement("canvas"); 
if (typeof canvasObj.transferControlToOffscreen === "function") { 
    isSupported = true; 
} else { 
    isSupported = false; 
} 

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to check the OffScreenCanvas 
        is supported by the Browser or not? 
    </title> 
</head> 
  
<body> 
    <h1 style="color: green"> 
        GeeksforGeeks 
    </h1> 
      
    <b> 
        How to check the OffScreenCanvas is 
        supported by the Browser or not? 
    </b> 
      
    <p> 
        Click on the button to check for  
        OffscreenCanvas support 
    </p> 
      
    <p> 
        OffscreenCanvas is supported:  
        <span class="output"></span> 
    </p> 
      
    <button onclick="checkOffscreenCanvas()"> 
        Check for OffscreenCanvas 
    </button> 
      
    <script type="text/javascript"> 
        function checkOffscreenCanvas() { 
            let canvasObj = document.createElement("canvas"); 
                if (typeof canvasObj.transferControlToOffscreen 
                                === "function") { 
                    isSupported = true; 
                } else { 
                    isSupported = false; 
                } 
            document.querySelector('.output').textContent 
                        = isSupported; 
        } 
    </script> 
</body> 
  
</html> 