Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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:




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

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




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


Output:

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


Last Updated : 05 Nov, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads