Jump Start HTML5

Chapter 14Canvas & SVG: Handling Non-supporting Browsers

In this short chapter, we'll look at creating code that tells the browser how to behave if it doesn't support canvas rendering.

Create Alternative Content

The best way to handle the possibility that a user's browser doesn't support canvas is to place alternative content within the <canvas> tag. This does away with confusion for the end user if they can't see what's supposed to be displayed.

You can use an img tag, explanatory text, or any other HTML you think necessary for this alternative content. For example:

<canvas id="MyCanvas" width="150" height="300">
  <img src="http://yoursite.com/locationofimage.jpg" 
  ↵alt="Browser Not Supported" />
</canvas>

If the browser supports canvas, the ...