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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



  • Before clicking the button:
    not-undefined-before
  • After clicking the button:
    not-undefined-after

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before clicking the button:
    check-transfer-fn-before
  • After clicking the button:
    check-transfer-fn-after

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.