Open In App

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

Last Updated : 05 Nov, 2019
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


Similar Reads

How to detect HTML 5 is supported or not in the browser ?
HTML 5 is the latest standard of HTML that includes many new changes and features. HTML 5 support can be detected by using three approaches:Method 1: Checking for Geolocation support: The Geolocation API was added in HTML5. It is used for identifying the user's location. The presence of this API could be detected by checking if the geolocation prop
4 min read
How to check the OffScreenCanvas is supported by the Browser or not ?
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
3 min read
Which media format is supported by the browser in HTML ?
HTML supports various media elements such as audio or video. It uses media tags such as &lt;audio&gt;, &lt;video&gt;, &lt;source&gt;, &lt;embed&gt; and &lt;track&gt; to include media files in HTML documents. Multimedia files can be in different formats (example- MP3, MP4, WEBM) which can be identified by looking at the extension of these files. Amo
6 min read
What are different video formats supported by browsers in HTML ?
In this article, we will see what are the different video formats that are supported by the browser, along with understanding their implementation. Browsers support text in different colors with different fonts and along with supporting various media which includes images, music, videos, animations, etc. A video exists in different formats such as
3 min read
How to check if CSS property is supported in browser using JavaScript ?
Few CSS properties are not supported in some browsers, thus it is required to check whether a CSS property &amp; its value are supported in the current browser. We can find it using JavaScript using CSS.supports() method. Syntax: supports(propertyName, value) supports(condition) There are two distinct parameters: propertyName: A string containing t
2 min read
Bootstrap 5 Navbar Supported Content
Bootstrap 5 Navbar Supported content contains Navbar which supports various sub-components like .navbar-brand, .navbar-nav, .navbar-text, .navbar-toggler, and .navbar-scroll. Brand: It is a company, project, or product name. We add .navbar-brand to various components like a heading or a link. We can add an image, text, or both image and text as our
2 min read
Explain the types of lists supported by Bootstrap
A list is a record of information that makes finding items easy using bullets. There are 3 types of lists supported by Bootstrap are: Unordered Lists: In Unordered lists, items are marked with bullets.Ordered Lists: In Ordered lists items are marked with numerical bullets such as 1,2, i, ii, etc.Definition Lists: In Definition lists, items are defi
3 min read
Foundation CSS Flexbox Mode Supported Components
Foundation CSS is a front-end framework that is open-source, free, and allows for the creation of flexible web designs. One of the most potent CSS frameworks, it features a responsive grid, cross-platform HTML and CSS UI elements, templates, and more. Additionally, it offers a variety of optional JavaScript Extension features. It renders quickly on
5 min read
Bootstrap 5 Validation Supported Elements
Bootstrap 5 Validation is supported by various elements present in the form and you can use it to make sure the user knows about which field is mandatory. The different elements in the form group which are supported are: &lt;input&gt;s and &lt;textarea&gt;s with .form-control&lt;select&gt;s with .form-select.form-checks Bootstrap 5 Validation Suppo
3 min read
Next.js Supported Browsers and Features
NextJs is a popular JavaScript library that helps developers create server-side rendered React applications. It’s one of the most popular frameworks for creating React applications, and it’s used by some of the biggest companies in the world, such as Airbnb, Netflix, and Reddit. In this blog post, we will explore what NextJs is, what browsers it su
4 min read