How IE <canvas> tag emulation works
Posted 15 years ago
The <canvas> tag is the current fangled way of displaying vector graphics in a web browser. Before, all graphics were images, Flash animations, or even thousands of one-pixel <div>s. Finally, Internet browsers have caught up to the 1970s and will be able to draw lines and curves programmatically, and you don't have to pay $699 USD for the priviledge.
At the time of this writing, Internet Explorer at version 8.0 still lacks the <canvas> tag. But you can easily add the capability by including a short javascript file in your page. At first glance, that's astounding. How do you implement an entire vector graphics API in a few lines of Javascript?
Actually, IE has had the ability to do vector graphics for years. For IE 5.0, Microsoft was aware at how useful it would be, and also keenly aware of how long standardization takes, so they went ahead and implemented something called VML (Vector Markup Language), after it had been submitted to the standards process. SVG is simply VML (combined with some competing submissions) after it went through the process of being standardized.
For example, this code will draw an ellipse in VML.
<style>v: * { behavior:url(#default#VML); display:inline-block }</style>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
<v:oval style="width:100pt;height:50pt" fillcolor="red">
</v:oval>
In 2005, Emil A Eklund created a simple translation layer in Javascript that emulates canvas.
IE doesn’t support SVG natively either, it does support something called VML though, and it’s been around since the 5.0 days, if I remember correctly. VML does pretty much the same thing as SVG (as far as basic drawing is concerned).So there is it. The ExplorerCanvas script isn't magic. It inserts VML tags into your web page when you call its various drawing routines.Using VML, in combination with behaviors, it should therefor be possible to emulate a subset of SVG or Canvas in IE. That’s the idea I got a few days ago when working on a basic drawing abstraction, and according to Google a few others have thought along those lines as well. Couldn’t find any actual implementation though so I decided to make my own, how hard could it be?
If such implementation could be created it would open up the world of client side drawing to web site developers and allow all kind of neat widgets to be developed.
Steve Hanov makes a living working on
Rhymebrain.com,
PriceMonkey.ca,
www.websequencediagrams.com,
and Zwibbler.com. He lives in
Waterloo, Canada.
Post comment
0, 1, Many, a Zillion
It's common wisdom that there should only be three numbers in source code. But there's actually four. Here's why.Comment spam defeated at last
For years when running this blog, I would have to log in each day and delete a dozen comments due to spam. This was a chore, and I tried many ways to stem the tide.Fast and Easy Levenshtein distance using a Trie
If you have a web site with a search function, you will rapidly realize that most mortals are terrible typists. Many searches contain mispelled words, and users will expect these searches to magically work. This magic is often done using levenshtein distance. In this article, I'll compare two ways of finding the closest matching word in a large dictionary. I'll describe how I use it on rhymebrain.com
Keeping Abreast of Pornographic Research in Computer Science
Burgeoning numbers of Ph.D's and grad students are choosing to study pornography. Techniques for the analysis of "objectionable images" are gaining increased attention (and grant money) from governments and research institutions around the world, as well as Google. But what, exactly, does computer science have to do with porn? In the name of academic persuit, let's roll up our sleeves and plunge deeply into this often hidden area that lies between the covers of top-shelf research journals.
cairo blur image surface
This really should have been included in cairo. Instead, everyone that wants to have shadows has to roll their own blur function. Here's my take on it. I'll even release this into the public domain.
Succinct Data Structures: Cramming 80,000 words into a Javascript file.
jQuery creator John Resig needs a little help storing lists of words in his side project. Let's go overkill and explore a little known branch of computer science called Succinct Data Structures.
Cell Phones on Airplanes
Much ink has been spilled about the use of cell phones on airplanes. Here's the truth, which will be disappointing to conspiracy theorists: Cell phone signals most definately have an effect on other electronic equipment. Read on for more.Tool for Creating UML Sequence Diagrams
If you have to draw something called "UML Sequence Diagrams" for work or school, you already know that it can take hours to get a diagram to look right. Here's a web site that will save you some time.