How to detect HTML <canvas> is not Supported by JavaScript?

Last Updated : 11 Oct, 2024

To detect if the HTML5 <canvas> element is supported by JavaScript, the existence of the getContext method is checked. This method is essential for rendering graphics on the canvas.

Approach: Using getContext() method

The getContext() method retrieves the drawing context of a canvas element and returns null if the context identifier is unsupported.
A new canvas element is created using document.createElement(), and getContext('2d') checks for a two-dimensional rendering context.
Double negation (!!) is used to convert the returned value to a boolean, where null becomes false and any non-null value becomes true.
The boolean result indicates whether HTML5 canvas is supported in the browser.

Example 1:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to detect HTML 5 canvas is
        not supported by JavaScript?
    </title>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    
    <b>
        How to detect that HTML5 <canvas>
        is not supported by JavaScript?
    </b>
    
    <p>
        Click on the button to check
        for Canvas support
    </p>
    
    <p>
        Canvas is supported:
        <span class="output"></span>
    </p>
    
    <button onclick="checkCanvas()">
        Check for canvas
    </button>
    
    <script type="text/javascript">
        function checkCanvas() {
            
            canvasElem = document.createElement('canvas');
            
            isSupported = !!canvasElem.getContext('2d');

            document.querySelector('.output').textContent
                    = isSupported;
        }
    </script>
</body>

</html>

Output:

getContext-after

Example 2:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to detect HTML 5 canvas is
        not supported by JavaScript?
    </title>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    
    <b>
        How to detect that HTML5 <canvas>
        is not supported by JavaScript?
    </b>
    
    <p>
        Click on the button to check
        for Canvas support
    </p>
    
    <p>
        Canvas is supported: 
        <span class="output"></span>
    </p>
    
    <button onclick="checkCanvas()">
        Check for canvas
    </button>
    
    <script type="text/javascript">
        
        function checkCanvas() {
            isSupported = !!window.HTMLCanvasElement;

            document.querySelector('.output').textContent
                    = isSupported;
        }
    </script>
</body>

</html>