My HTML5 Canvas Skeleton
I’ve been reading quite a few books and online articles lately in order to pick up HTML5 canvas and refresh my memory of JavaScript that I had forgotten. Along the way I’ve learned quite a few things about detecting HTML5 capability, getting HTML5 to work in older versions of IE that don’t support it, and why waiting for the page to finish loading before running any JavaScript is bad. In the end, I’ve created a skeleton file for HTML5 work that handles all of the above problems that I’ll show after I discuss the three main issues above.
Detecting HTML5 Capability
There are three popular ways to detect HTML5 capability. First is to use an if-statement in pure JavaScript:
if (!theCanvas || !theCanvas.getContext) {
return;
}
This tests two things: whether theCanvas is not false and whether the getContext() function exists. The second method, popularized by Mark Pilgrim on his HTML5 site http://www.diveintohtml5.org, uses a function that tests a dummy canvase created to check whether the browser supports it or not:
function canvasSupport() {
return !!document.createElement('testcanvas').getContext;
}
function canvasApp() {
if (!canvasSupport) {
return;
}
}
The third, shortest, possibly most efficient and optimized method that I recommend, is to use Modernizr.js (http://www.modernizr.com):
function canvasSupport() {
return Modernizr.canvas;
}
All three ways are valid, but for the sake of brevity – and also because Modernizr has some cool features – I prefer the last one above.
Getting HTML5 To Work In Older Versions of IE
Any version of Internet Explorer older than 9 does not have canvas support. According to W3, around 1/5 of all Internet users today browse with IE: http://www.w3schools.com/browsers/browsers_stats.asp
Of those IE users, more than half are running on a version older than IE 9: http://www.w3schools.com/browsers/browsers_explorer.asp
This equates to 10% of the people on the web being unable to see or interact with the HTML5 canvas. Instead of telling them to upgrade, there is a script called ExplorerCanvas that will cause the canvas to render on IE browsers prior to version 9 by simply including it in the header. You can find it here: http://code.google.com/p/explorercanvas
Running JavaScript After The Page Has Loaded
In pure JavaScript, the window.onload event allows us to call a function after the web page has finished loading absolutely everything:
window.onload = function() {
// JavaScript code here
}
The problem with this is that window.onload is just too patient and only runs after everything has been loaded. In reality, we want the content to be accessible but we don’t want to wait for every single piece of content to load and become visible before rendering our JavaScript. While perusing the web, I found a solution written by Dean Edwards, Matthias Miller, and John Resig that handles this: http://www.thefutureoftheweb.com/blog/adddomloadevent
The “solution” is basically a lot of code that I personally would rather not have in my JS. Thankfully, the $(document).ready() function in jQuery is optimized to handle all that:
$(document).ready(function() {
// JavaScript goes here
}
 Putting It All Together – The Skeleton Pack
I’ve combined the three lessons above into a set of skeleton files that I plan to use for all my HTML5 development. Modernizr (http://www.modernizr.com) and ExplorerCanvas (http://code.google.com/p/explorercanvas) are not Google-hosted so they will need to be downloaded separately. My skeleton pack, however, does include their latest versions as of today’s date.
You can download the skeleton pack here: https://www.zesix.com/html5/html5_skeleton.zip
