Providing a Fallback for an HTML Canvas

Content:

While the HTML canvas element sees strong support among modern web browsers, there are still a few outliers that are unable to use them. On top of this, there are millions of devices running older browsers, which similarly lack support.

Missing canvas content can dramatically alter the appearance of a webpage, which is why it is useful to set a fallback to display in case the requested element cannot be rendered.

Here are a few techniques to consider for gracefully dealing with missing canvas support.

Adding a Static Background to the Canvas

If your canvas node is used to provide a dynamic background to your site, you can instead set a static background to use if the canvas element cannot be used.

If it’s acceptable to apply a background image to your canvas unconditionally, you can do this through the CSS background-image property.

If not, add a simple check in your JS, and apply the CSS property where setting the canvas context failed.

const canvas = document.querySelector('canvas');

if (!!canvas.getContext) {
    canvas.style.backgroundImage = "url('/path/to/image.jpg')";
    return;
}

Replace the image path with the path to the image you want to use as the background. You might also want to set other CSS background related properties to control how the background is displayed.

It’s worth noting that this does not account for the case where the browser does not recognise the HTML canvas tag at all, though the number of browsers still in use with no support is very low.

Adding a Fallback Inside the Canvas Element

A canvas node is similar to an img, in that the content is not defined within the tags. You can add content inside the canvas element, which will display when the fallback is required.

This could take the form of text, or another HTML element.

<canvas>
    <div id="canvas-fallback">Chart to show stock prices over the last year.</div>
</canvas>

An advantage of this method is that browsers that do not recognise the canvas tag at all will simply ignore them, and still render the element inside the canvas.

It’s recommended to provide complementary content to explain to the user what they should be seeing – simply telling them their browser does not support the canvas API is not helpful.

You could choose to show similar, but static content instead. For example, instead of rendering a dynamic graph with tooltips, you could a static image of the graph, alongside some text to explain the content.

Removing the Canvas from the DOM

When the canvas element is present in the DOM, it will have an impact on the page layout. This is particularly true where CSS properties are applied to the canvas.

Removing the canvas from the DOM will ensure that the element is no longer allocated space, and will have no impact on the rest of the page.

This option is useful where the canvas is used to add additional content to a page, for example, an animation alongside an article.

How you accomplish this depends on how you are adding the canvas to begin with.

If you’re adding the canvas in your HTML, you can remove it in JS using

const canvas = document.querySelector('canvas');
canvas.parentNode.remove(canvas);

If you’re creating and appending the node using JS, you can perform a similar check we looked at previously, only this time skipping appending the node to the page.

const canvas = document.createElement('canvas');

if (!canvas || !!canvas.getContext) {
    return;
}

document.body.prepend(canvas);

If you want to check whether the HTML canvas tag is recognised at all, you can add a further clause, preferably at the start of your canvas rendering code.

if (!!window.HTMLCanvasElement) {
    // canvas not recognised
}

This check can be incorporated with the previous checks, to remove the canvas element/prevent it from being added to the page.