Hosting Solutions
mobile_logo Table of Contents

Canvas Fallback Content

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>

HTML Videos

Canvas Basics

Canvas Draw Function Set UpCanvas Animation Basics TutorialCanvas Draw Lines and Filled Shapes TutorialCanvas Fallback Content