Canvas for IE with VML

Updated to clarify the relationship between <canvas> and SVG in Firefox.

Apple’s Safari browser, followed by Firefox 1.5 and the upcoming Opera 9, have all implemented support for the <canvas> tag, described by the Web Applications 1.0 draft specification (a.k.a. HTML 5). This tag lets you create an area for painting 2D graphics using JavaScript code.

Though filled with potential, <canvas> has not seen much use in mainstream Web development as yet, due mainly to the fact that it remains completely unsupported by Internet Explorer.

Where <canvas> has been used has been in implementing support for Also getting attention in the Web vector graphics arena is Scalable Vector Graphics (SVG) in Firefox 1.5. SVG is a W3C standard for 2D graphics similar in scope to <canvas>, but with the ability to access previously-drawn graphics and modify them using JavaScript. Firefox 1.5’s support for SVG is built atop the same graphics subsystem as its support for <canvas>.

It turns out a similar trick can be used to bring support for <canvas> (and perhaps, one day, SVG) to Internet Explorer. With a bit of experimentation over the course of a few evenings, Emil Eklund has been able to use Vector Markup Language (VML), a proprietary language similar to SVG supported by Internet Explorer 5 or later for Windows, as a basis for adding basic support for <canvas> to Internet Explorer.

Though there remains much work for intrepid developers to do to bring complete support for <canvas> to Microsoft’s browser, the basics are there and working, and certainly up to the task of rendering, say, charts, graphs and other simple vector illustrations.