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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Robin

    That’s an interesting development, but for the sake of clarity I should underline that SVG support Firefox has *not* been built on top of canvas (likewise for the SVG support in Safari and Opera). The graphical abilities of canvas are way too limited for that.

  • http://www.ohnnyj.com ohnnyj

    Why not use Flash?

  • http://www.sitepoint.com/ Kevin Yank

    Why not use Flash?

    Some discussion of this in Rich Web: SVG And Canvas In Mozilla.

  • clintonG

    What good are little blue boxes and acid trip gradients but to remind us of the era of Flash eye candy? Look how long it took for Flash to come into its own.

    My point being the use of vector drawings in web applications will be considered worthless eye candy until the use of vector drawings become data-driven interactive models which can convey meaning and value. Like architectural floor plans that interactively give directions. Like machine part drawings that describe their operational maintenance schedules. Any spatial analysis for that matter.

    The National Institute of Science and Technology (NIST) has determined that the U.S. construction industry operates at an annual loss of $15 billion. In their reports, NIST stated the reasons they discovered are due to the lack of software applications and the use of information technology throughout the U.S. construction industry.

    But wait, what does this have to do with vector graphics and the web?

    Autodesk controls the entire US construction industry lock stock and barrel and much if not most of the global markets who use Autodesk products in the AEC markets (Architectture, Engineering, Construction). Autodesk controls major sectors of all US manufacturing processes and actually earns most of their revenue from manufacuting sectors which use Autodesk software to design and draft using vectors as do those in the AEC markets.

    It is not a stretch to then logically conclude that it is Autodesk that is responsible for imposing the greater part of the $15 billion of annual losses to the US construction industry. And what of other industries and the unknown losses Autodesk imposes? But why?

    While Adobe has supported SVG they have failed to tool SVG. (As an aside, I believe Adobe will do the same with Macromedia’s assets). Like Adobe and Microsoft, Autodesk bought a seat on the W3C SVG committee but Microsoft and Autodesk did so to spy and scuttle. That was several years ago and as we know SVG has gone nowhere. Any attempt to discuss SVG in the Autodesk newsgroups is ignored. Autodesk products do not support SVG in any context.

    My point is to convey the contention that Autodesk is a subversive and corrupt corporation. Anybody who has any experience with Autodesk (especially any software development experience) would know there is something to be said about such a statement. Reading their product and software development licensing is a great way to learn how slimey they really are.

    While Autodesk has in fact created outrageoulsy useful design and drafting software Autodesk has gone to great lengths to cripple the products to obstruct, hinder, or prevent their use with the web. They have done the same with their proprietary file formats. Autodesk’s subversive control of customer’s drawing assets are legendary.

    Autodesk also sells proprietary software as a service called Buzzsaw; a collaborative portal for those working with vector drawings created using Autodesk products. Autodesk will protect that and its proprietary file format and flush the whole f*cking world down the toilet before using their wealth to make it possible for them to have what they need as a company while enabling and empowering others to enjoy the same. That’s the way they are.

    If my supposition regarding data-driven interactive vector graphic models which can convey meaning and value has merit — as the historical record and common sense suggests it does — it will be Autodesk that will prove themselves to be the biggest obstacle as Autodesk is indeed a subversive and corrupt corporation that will obstruct, hinder, and prevent the use of vector graphics deployed on the web.

  • lt

    As an architect that uses many of the Autodesk products I agree with the above comments regarding Autodesk tactics for the control of their customer base.

  • Pingback: Alan Kleymeyer’s WordPress Blog » Blog Archive » Vector Graphics in Browsers

  • shelly

    In respect to above comments regarding interactive models. Work is in progress: check out http://www.cumulatelabs.com
    currently this works in IE only but we have plans to port this to firefox

  • OMG Look Above

    Look at the above 3 comments. So this company Cumulatelabs comes along to challenge Autodesk. They post on this site and say ‘look see there are web SVG tools’ and by the time I get to the link Autodesk has already bought them out! After that huge post bashing Autodesk I learned a lot about something I never even thought about. Yeah it does make sense why there are no business SVG tools on the web. Then after that last Cumulatelabs post I have never been so sure of selfish corporate tactics that stifle growth. Wow Autodesk truly is the embodiment of the evil corp and what I witnessed above me proves it. Wait for someone to post below me and say ‘cumulatelabs always belonged to autodesk’! LOL. Thanks for the heads up.

  • clintonG

    Actually, the controversy rages on. Autodesk’s Project Draw will save to DWFx proprietary to Autodesk’s file viewers and will also save to the SVG file format which is now in the hands of the W3C working groups.

    There is no native support for XAML which Autodesk should take responsibility for and make a priority for Project Draw.

    SQL Server 2008 is currently the only database I am aware of which supports a relational geometry data type as well as a geospatial data type too I might add both of which are meant to be used to store relational or hierarchical expressions of 2D or 3D vector models.

    I do not think anybody has a means to map the XAML or any other vector file format to the new data types. The Windows Presentation Foundation or Silverlight as the case may be both use XAML which IMO appears to be the best way to do so. Moving the model into and out of the drawing tools into and out of the development tools remains the same issue I discussed earlier; that issue finally taken up by NIST to stamp the results with an authoritative conclusion which finds interoperability to be the single most challenging objective.

    Personally, I believe Microsoft is going to “get it” even though it is still sleepy and stumpling around trying to find its footing on the web because “it” will make it possible for the company to morph into the Software plus Services and Software as a Service provider leaving Google as a has been and “it” is the WPF/Silverlight/SQL Server and he XAML vector file format.

    Granted, it will likely take 5-10 more years but I also happen to think one day soon Autodesk will “get it” too as it will be Autodesk which will be eaten by the larger fish.