The canvas tag is most simply an element of HTML5 (HTML4 is the current standard) that allows for dynamic scriptable rendering of bitmap images over time. Sound familiar? cough:flash:cough Currently with HTML we’re stuck with images, boxes, and text. Canvas unleashes all that.
In Canvas you can run video, with no initialization of any player, no plugin needed. You can have perfectly consistent rendering of any font across all OS’s and browsers. You can draw complex vector shapes with gradients and pixel by pixel manipulations.
Just to get across a quick sample of the sheer power of the canvas element download Firefox 3.1 and give these links a shot.
Mario Cart game with Canvas
Real Time Green Screen Chroma Keying with Canvas
Bespin: An online text editor by Mozilla with Canvas to render the text
iwork.com – Apple’s online sharing tool for iWork Documents uses Canvas to render the document itself in the browser to ensure perfect representations of the actual document.
Cross Browser Support
I know what you’re thinking, “What about IE, its useless if there is no IE support.”
No version of IE supports canvas. Currently IE8 beta doesn’t even support canvas. However, there are workarounds.
One using SVG (Scalable Vector Graphics):
One ironically using Flash as a bridge:
The last remaining puzzle is, “How do we lower the barrier of entry for canvas?”
Last 5 posts by Ted
- Your Customers Need Your Website to be Responsive. Is it? - July 19th, 2012
- Our Take on Two Emerging Marketing Trends - March 5th, 2012
- Show how it works - December 6th, 2010
- Rah! Rah! Team! - November 9th, 2010
- Show how it works - November 4th, 2010