HTML5: Canvas Demo

The following is a demo of  the HTML5 <canvas> tag in operation:

If you cannot see this nifty demo try any of the following: 1 2 3 or 4.
Now some other nifty Canvas demos and references:
HTML5 Canvas cheat sheets – very helpful for using <canvas> scripting.
BillMalone – detailed example of using canvas to create icons with browser compatibility info.
Google IExplorerCanvas addon – gets canvas tags to work in IE8.
DivingIntoHTML5 – the excellent tutorial on the canvas tag with Halma game example.
CanvasDemos – dozens of examples, games and tutorials for using HTML5 Canvas
HTML5Demos – has 2 dozen examples of HTML5 in action including 2 canvas demos – one gets a clearer idea of the status of HTML5 regarding the 5 major browser vendors. Guess who is lagging?
Thirteen Incredible Canvas Demos – some great canvas demos plus code
Ben Joffe – again some great examples of what can be done with canvas tag
Wikipedia Canvas – concise summary of what canvas can do; but still some great links/references
Canvas Tests – A rigorous set of tests for all key canvas functions and attributes [CTL+U to see the source]


Except for Microsoft [IE9 is still in test drive harness] , implementation of the canvas tag in the browsers is pretty good. This is a welcome trend. But there are still major hurdles – integrations with CSS3, 3D drawings, SVG and vector drawing integration, and most importantly link to touch+gestures control. Here is a sobering warning about browser standards: browser page tabs still cannot be controlled through HTML or even JavaScript [except if you are using your own within-the-page created tabs using a JavaScript framework like Dojo, DHTMLx, EXTjs, jQuery, etc]. Likewise except for Safari using Webkit and tentatively FireFox 4 using Gecko, multi-touch support in browsers is up in the air and has yet to appear in the standards. Yet clearly multi-touch and gestures is driving much interface design. Will this “touching” need be provided to Web developers in a timely fashion? And of course this raises questions about how future canvas capabilities will evolve.

1 thought on “HTML5: Canvas Demo”

Comments are closed.

Pin It on Pinterest