When the canvas tag is not supported do somehting

Question

For when a browser does not support the canvas tag I show an image.

I have placed this image as a background of a div inside the canvas tag:

<canvas width="1200" height="470">
    <div id="wallpaper"></div>
</canvas>

The image still downloads though, even if the canvas tag is supported, is there a way to prevent the image downloading to the browser if the canvas tag is supported?

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

No, not really. But you can test for it the other way around.

Check for a solution here.

edited May 23 '17 at 10:26

Community

1
1

answered Sep 12 '14 at 12:51

c_k

321
1
6

score 0 · Answer 2 · edited May 23 '17 at 11:57

What you need to do is determine if the browser supports canvas before it is drawn or the image is loaded. Try using JavaScript like (retrieved from https://stackoverflow.com/a/2746983/3869056):

function isCanvasSupported() {
 var elem = document.createElement('canvas');
 return !!(elem.getContext && elem.getContext('2d'));
}
if(!isCanvasSupported())
 document.getElementById('canvas').innerHTML = '<div id="wallpaper"></div>';

Of course, this may not be exactly what you want, but it should do the work for you.

When the canvas tag is not supported do somehting

2 Answers2