How to Check the OffScreenCanvas is Supported by the Browser or not?

Last Updated : 11 Oct, 2024

OffscreenCanvas enables rendering graphics in a separate thread, improving performance for complex applications. To determine if the OffscreenCanvas is supported by a browser, checking for its existence in the global window object is essential.

Below are the methods to check the OffscreenCanvas is supported or not:

Table of Content

Using typeOf Operator
Using transferControlToOffscreen method

Approach 1: Using typeOf Operator

The typeof operator checks the type of a variable or object.
You can use typeof to see if the OffscreenCanvas object exists in the browser.
If typeof OffscreenCanvas returns 'undefined', it means OffscreenCanvas is not supported.
If it returns something else, OffscreenCanvas is supported by the browser.
Comparing typeof OffscreenCanvas with 'undefined' helps you determine if it is available.

Syntax:

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

Example: This example shows the implementation of the above- mentioned approach.

html

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

Approach 2: Using transferControlToOffscreen method

The transferControlToOffscreen method transfers control of a canvas to an OffscreenCanvas object.
It is used to initialize the OffscreenCanvas.
To check if transferControlToOffscreen is defined, use the typeof operator and compare it with 'function' using strict equality (===).
If the comparison returns true, OffscreenCanvas is supported by the browser.

Syntax:

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

Example:This example shows the implementation of the above-mentioned approach.