Best way to detect that HTML5 `` is not supported

html

responsive-design

performance

best-practices

byNikita Barsukov·Sep 8, 2024

A straightforward way to detect HTML5 <canvas> support:

var isCanvasSupported = !!document.createElement('canvas').getContext;

With this, isCanvasSupported is true if <canvas> is supported, and false otherwise. This feature detection is essential for developing fallback strategies within a web application.

Broadening your detection net

Checking for 2D context support

Get more granularity by probing for 2D context availability:

var canvas = document.createElement('canvas');
var isCanvas2DSupported = !!canvas.getContext && !!canvas.getContext('2d'); // Who needs 3D when 2D is this cool?

Detecting WebGL capabilities

And if you need to paint in 3D with WebGL, feature detection steps up:

var isWebGLSupported = function() {
    var canvas = document.createElement('canvas');
    return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
};

Dealing with unsupported `<canvas>`

And if <canvas> is unsupported:

Modify the page content or layout dynamically
Serve static alternatives, such as images
Consider crafting an informative message for the user

Practicing progressive enhancement

Seamlessly switch to JavaScript

if (isCanvasSupported) {
    var canvas = document.createElement('canvas');
    // Configure your canvas' dimensions or styling here
    document.body.appendChild(canvas);
} else {
    // Provide fallback or alert the user, don't just make it disappear!
}

Styling with conditional CSS

With a library like Modernizr, or manual class addition on the <html> tag, conditional CSS styling becomes a reality:

.no-canvas .fallback {
    display: block; // Show them what they're missing!
}

Tackling context retrieval hiccups

Mobile browsers' peculiarities

Contrary to common expectation, some mobile browsers might validate the feature checks but fail at context retrieval due to hardware constraints or incorrect browser configurations. It's a wild web out there, beware!

Robust exception handling

Use a try...catch block for handy exception handling when getting the context:

try {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    // Time to unleash the artist within, Picasso!
} catch (e) {
    // Fallback, maybe a stick-figure drawing or a polite alert?
}

An ounce of prevention and a pound of best practices

Shunning misleading fallback content

Ensure fallback content does not create a false impression of supported features. Beating around the bush only fans frustration!

Mind the potential spoofing heads up

Detection methods via HTMLCanvasElement and getContext can be spoofed. It's justified to be a little paranoid, check twice, trust once!

Prioritizing the user experience

Design your web application to dynamically adapt its content for consistency and accessibility, regardless of feature support. Keep users first, even when canvas is last!