Manage Learn to apply best practices and optimize your operations.

Get ready for HTML5 and canvas elements

The HTML5 canvas element is a new way to display active graphics and manipulate images with JavaScript. Find out what the new element will mean for Web development teams.

For many development team members, there was an "Oh Wow" moment in 1995 when Sun and Netscape (remember them?) demonstrated Java applets running in the Netscape browser for the first time. I was particularly impressed with the 3D molecular model you could rotate in real time with the mouse. Since that time developers have created many other forms of technology to bring active graphics to the browser experience as add-ons to HTML. Now comes HTML5 with the "canvas" element for graphic display and JavaScript support for manipulating it. The natural question is, "will this eliminate the need for all those other plugins?"

But, before proceeding, it may be valuable to look at the cautionary tale of GIF and GIF patents.

GIF (Graphics Interchange Format) was adopted by CompuServe in 1987 when bandwidth on dialup connections made the high degree of compaction very desirable. Originally used for static images, it was found possible to extend the GIF standard to provide limited animation. GIF images were easy to import into Java applets for animation and generally the most common image format by far.

Unfortunately, it later turned out that the compression method, known as Lempel-Ziv-Welch (LZW) data compression was a patented algorithm. The patents (1981, 1983) were assigned to the corporation which became Unisys. Many developers were very disturbed on hearing rumors that there might be litigation if they used the format. Thus there was a push to create PNG to both improve image fidelity and avoid patents. Partly as a result of the GIF story, it is not an exaggeration to say that there is a great deal of paranoia in the developer community about software patents. Fortunately the LZW patents have expired as of 2003.

Note that the above issue of imaging patents – and others – hang over some of the HTML5 developments underway today.

Apple pioneered the canvas concept for use in their "WebKit" HTML layout engine. WebKit has been released as open-source and is used in Apple's Safari browser and Google's Chrome browser. The Web Hypertext Application Technology Working Group (WHATWG), created to develop standards independently from the W3C in 2004, adopted canvas as part of the web extensions that have become HTML5. Initially, the question of Apple's patent rights caused some worry, but Apple has now agreed to follow the W3C's royalty-free patent licensing terms.

The canvas element in HTML5

A canvas element in a web page defines a rectangular area available for drawing plus a text message displayed if the browser does not support canvas. Basically, this gives you an area of a page where you can draw, render static images or play media. The access to the programming API for a canvas is very elegant and flexible. The first step is to get a JavaScript reference to your canvas element, identified with a unique "id." Next, you get a reference to a drawing "context" by naming the API you want to use. In the following example we request a drawing context using the "2d" API - the most common at this time.

 var canvas = document.getElementById('the_canvas');
 var context = canvas.getContext('2d');

With the 2d context JavaScript can draw on the canvas using functions which will be familiar to a developer who has used low-level drawing functions in just about any language. In addition to drawing lines and filled geometric figures you can render images. To create a dynamic changing display, you must completely and repeatedly redraw the rectangle. The 2d context does not support many of the concepts used in higher level graphics such as a scene graph.

So far in the existence of HTML5, the only competition for 2d context is "webgl" which gives you a 3D rendering API. The API is 3D because it knows about depth and which elements get drawn on top of other elements. WebGL is derived from the OpenGL ES 2.0 standard and provides similar rendering functionality, but in an HTML context.

The development of WebGL is manged by the Khronos Group, a not-for-profit industry group devoted to creation of open standard and royalty free graphic APIs.All major browser vendors except Microsoft are members of the working group. The final draft of WebGL version 1.0 was released February 18, 2011. This draft is expected to be very close to the final standard.

What about SVG?

Scalable Vector Graphics (SVG) has been touted since 1999 as the universal solution to drawing on a HTML page. SVG is considered a higher level graphics technology because it creates a complete image as a "scene graph" which will be redrawn automatically if any element is programmatically modified. To do this on a canvas would require additional JavaScript libraries. An SVG image is encoded in XML so well known XML generation and editing tools are available. "Scalable" means that an SVG encoded image can be drawn at any screen resolution without bit artifacts, a big plus when creating content that must be rendered on both phones and desktops.

All modern browsers except Microsoft IE (prior to version 9) support basic SVG graphics so in the future you will be able to choose SVG or canvas for dynamic graphics on web pages. Browsers on mobile devices may implement a reduced set of SVG functions. SVG is a W3C standard developed with the aid of a number of browser developers from major companies and apparently unencumbered with patent problems.

Developers are welcoming the HTML5 canvas as a standardized way to present video. Video presentation is so burdened with patent rights and battling codecs that it will take a whole separate article. Stay tuned.

Additional HTML5 resources


Dig Deeper on Topics Archive

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.