Skip to content
Related Articles

Related Articles

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




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>

Output:

  • Before clicking the button:
    check-transfer-fn-before
  • After clicking the button:
    check-transfer-fn-after
My Personal Notes arrow_drop_up
Recommended Articles
Page :