By Kevin Yank

Canvas for IE with VML

By Kevin Yank

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.

The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account