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

Method 1: Create a canvas element and use getContext() method: The getContext() method of a canvas object is used to return the drawing context of the canvas element. It returns null if the context identifier is not supported. This property can be used to check if the canvas element is supported, as a non HTML5 supporting browser would return NULL.
A new canvas element is first created using the document.createElement() method. The getContext() method is used on this canvas element with ‘2d’ as a parameter. It will check the context identifier of a ‘two-dimensional’ rendering context.

To convert the returned value to a boolean value, double negation (!!) is used before the result. This will force the result to be cast to a boolean value. A NULL would be cast to false and any other non-NULL value would be cast to true. The casted result can be used to check whether HTML 5 canvas is supported in the browser.

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:
    getContext-before
  • After clicking the button:
    getContext-after

Method 2: Checking for the HTMLCanvasElement interface: The HTMLCanvasElement is an interface that provides properties and methods for manipulating a canvas object. This interface can be accessed from the window object to check whether the canvas element is supported. If the value returned is a NULL, it means that there is no support for the canvas element.

To convert the returned value to a boolean value, double negation (!!) is used before the result. This will force the result to be cast to a boolean value. A NULL would be cast to false and any other non-NULL value would be cast to true. The cast result can be used to check whether HTML5 canvas is supported in the browser.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:
    htmlcanvaselem-before
  • After clicking the button:
    htmlcanvaselem-after


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

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.