Canvas Fallback Content

Published :
Author :
Adam Khoury
If the viewer uses an antiquated browser software there may be an empty space where the canvas should render. Fallback plugin or fallback content is provided to users with antiquated browser software. Or at very least we can render a text note for them to update their browser software before returning to the document that has canvas on it. <!DOCTYPE HTML> <head> <script> window.onload = draw; // Execute draw function when DOM is ready function draw() { // Assign our canvas element to a variable var canvas = document.getElementById("canvas1"); // Check to see if the canvas is supported in the user broswer if(canvas.getContext){ var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgba(24,124,200,1)"; ctx.fillRect (36, 10, 40, 40); } } </script> </head> <body> <canvas id="canvas1" width="400" height="300"> <img src="fallback_image.jpg" alt="fallback content"> </canvas> </body> </html>