Introduction to HTML Canvas
December 21st, 2009
New technology typically is met with mixed emotions and conflicting, often polar, opinions. This is definitely in the realm of HTML version 5′s new Canvas element, which threatens to open a wide variety of Pandora boxen for all to enjoy.
What is HTML Canvas?
Canvas is a standard feature of the latest iteration of HTML (now in version 5), originally developed by Apple for Safari, and eventually implemented in Chrome by Google, Firefox by Mozilla, and Opera by Opera Software.
Its namesake closely matches its intent: provide JavaScript developers with access to a canvas upon which to paint lines and shapes, blit bitmaps (translucency supported), print fonts, and render 3D objects.
Consider vastly different web-applications of (1) business software which draws charts and graphs in a real-time dashboard, (2) a blog site with subtly-animating background effects overlaid by HTML/CSS, or (3) a 2D- or 3D-graphics system which enables visitors to play online games.
In the case of the business software, one would typically purchase and use one of the many web-based spreadsheets packages available. For the blog site, perhaps a rich-media Flash+AJAX+PHP or Silverlight+AJAX+ASP.NET application would be the solution. And in the final case of a web-based game, the answer has typically been Flash, Silverlight, Java, or a technology-specific plugin like Unity3D.
But in each case, Canvas has the ability to take the reins and deliver rich content, regardless of whether it does spreadsheets and charts, blogs, or games.
Why is Canvas important?
The above three examples possess common traits:
- Traditionally, they involve expensive licensing fees for authoring software.
- Also traditionally, they tie both end-user and designer/developer to a particular authoring product, plugin, or method of delivery.
- End-users must be tech-savvy enough (and have enough OS-level permissions) to manage plugin installation themselves.
With absolutely zero installation required, its accessibility instantly surpasses that of Flash or Silverlight, which both require end-users to install and maintain updates for compatibility reasons. Since Canvas is a standard feature with generalized implementation instead of a browser add-on married to a particular authoring package, there comes into play a shift in focus from single-product-specific professionals to implementation-specific ones.
Who are the competition?
Like any new technology, Canvas is bound to go through growing pains. While it has a strong potential for penetration due to its install-less nature, it has some serious statistics to overcome. The current market-giant is Adobe’s Flash (formerly Macromedia Flash), with a staggering 99% worldwide browser penetration. Microsoft’s Silverlight has an admirable market penetration, weighing in at just under half of internet-connected computers. And Java, whose presence predates either competitor, maintains a steady presence on three-quarters of desktops.
What obstacles yet exist?
Microsoft Internet Explorer (in version 8 at the time of this writing, and still the default browser on many computers) doesn’t support Canvas (hence the advent of work-arounds), and I will be surprised if it ever does. Microsoft has more interest invested in cultivating Silverlight than it does in euthanizing it, so don’t count upon Canvas adoption anytime soon.
Because Canvas is young (and equally because of Flash’s venerability and Silverlight’s market penetration), designers and developers alike will have a difficult time dropping their preferred RIA authoring programs.
Since there are currently no public-ready front-end authoring solutions, which makes both Adobe Flash CS4 and Microsoft Expression Studio that much more attractive. Count on one of Canvas’ proponents — Mozilla with their upcoming Thunderhead — to develop a front-end authoring application suitable enough for designers and developers alike to jump-ship on Adobe or Microsoft. But Canvas is still new, and Thunderhead has a long way to go in terms of competing with Flash (now in its 13th year) in terms of usability.
What’s next?
Spread the word. If anything, competition is good for innovation, which only benefits end-users and customers. Keep a close eye on the evolution of Canvas. Talk about it!
And stay tuned for the second part of this series on using Canvas to achieve unusual results…
Links
For any technical information regarding HTML 5 Canvas, please view one of the following:
http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element (careful; long loading time!)
