Canvas in IE
Since Apple’s introduction of canvas earlier this year support for it has been added to both Mozilla and Opera, making it more widespread than, the much older, SVG. I suspect that’s largely due to the complexity of the later and the simplicity of canvas. However it still cannot see widespread deployment as it’s not supported by Internet Explorer, which has around 80-90% of the browser market.
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).
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.
Having spent a few evenings working on such an implementation I’ve managed to create a proof of concept:
- Demo
- Directory index
As of now the supported methods are; arc, beginPath, closePath, fill, fillRect, lineTo, moveTo, rect, restrore, rotate, save, stroke, strokeRect and translate.
Rotate only works if the origin is set to the the default value (0,0 - upper left corner)
As far as attributes goes, the only ones honored are; fillStyle, globalAlpha, lineWidth and strokeStyle.
It’s still work in progress and all functionality is not yet supported or doesn’t work correctly, however the basic functionality is there, and it looks promising.
December 30th, 2005 at 00:42
Fantastic work! I’ve been looking at implementing something similar - you beat me to it.
December 30th, 2005 at 12:45
Great work!
The problem probably could be the performance. If you sometimes have the implementation complete, it may be simply too slow for real-world-usage. Mozilla’s canvas outperformes IE’s version probably by factor 10 here.
Keep up the good work.
December 30th, 2005 at 17:05
Canvas in IE
As soon as we saw SVG, Ben thought that it would be quite possible to take the VML support that IE has had for a long time, and make a converter that would make a subset of SVG work in…
December 30th, 2005 at 18:27
I’m confused: from what I understand you implemented canvas on top of VML. I don’t see where SVG is involved in this.
December 30th, 2005 at 18:29
Julien Couvreur: SVG is not involved here, just mentioned it as a competing technology. It should however be possible to implement a subset of SVG (Tiny) in a similar fashion.
December 30th, 2005 at 19:05
Exciting! Canvas based charting libs here we come.
December 30th, 2005 at 19:52
Emil, this is great stuff!
I tried using your canvas.js and canvas.htc on my Ajax Trains example (http://redsquirrel.com/dave/play/ajaxtrains.html) but I saw nothing in IE. It looks like you haven’t implemented the drawImage canvas method (no complaints). But I expected at least to see the tracks and I’m wondering why I don’t see them. Anything come to mind?
December 30th, 2005 at 19:59
Dave: Make sure the htc file is served with the correct content type, ie is sensitive about that when it comes to behaviors (but mostly ignores them elsewhere). You’re right about drawImage, it’s not implemented, yet.
December 31st, 2005 at 06:47
I see that you have chosen to create ‘IECanvasContext’ as your rendering object, I suggest you rename it to ‘CanvasRenderingContext2D’ to coincide with the whatwg specification.
December 31st, 2005 at 07:44
Any info on getting canvas element to print wysiwyg.
December 31st, 2005 at 08:09
Hey, nice work! I was thinking of implementing something similar in Flash (for IE) but gave up after running into a some issues.
January 1st, 2006 at 08:42
Happy New Year
Just wanted to wish everyone a really great [civilian] new year
Went out last night - I think this was the first time I actually enjoyed myself on new years eve. I was at the Syndrome, which quite surprisingly wasn’t packed full - and there…
January 2nd, 2006 at 13:19
[…] Canvas in IE A Javascript/VML implementation of that works in IE (tags: javascript canvas SVG vml)
January 4th, 2006 at 05:06
[…] Emil is creating a script to make canvas work in IE. […]
January 6th, 2006 at 17:15
[…] Эмиль Эклунд написал эмулятор canvas для Internet Explorer. Небольшой скрипт при помощи VML реализует поддержку базовой функциональности canvas, его работу можно увидеть на демонстрационной странице. […]
January 9th, 2006 at 23:57
Error:
iecanvas.htc:
Bad:
IECanvasContext.prototype.stroke = function() {
[…]
o.weight = this.lineWidth;
[…]
Good:
IECanvasContext.prototype.stroke = function() {
[…]
o.strokeweight = this.lineWidth;
[…]
January 11th, 2006 at 08:08
[…] Emil has been really active lately. Not only did he emulate canvas in IE, he also used it to create a slick charting control for WebFX. […]
January 11th, 2006 at 14:40
This seems pretty fast in IE, would you have any brenchmarks against FF and IE?
January 11th, 2006 at 17:15
slyi: Did a simple performance test using the first chart on the chart component demo page. Created it ten times and timed the draw function.
The average time was just under 6 times higher in IE than in Mozilla. For the ie canvas demo the figure is closer to 7.
January 11th, 2006 at 19:50
Good stuff.
I implemented a similar library a couple of weeks ago. One problem I noticed, which I see you suffer from also, is that the colors are not identical across platforms. If you view the IE sample next to the Firefox sample, you can see that the colors in the IE version appear more washed out.
Let us know if you ever find any logic behind this or any way to compensate.
Cool hack, though, congrats.
January 15th, 2006 at 18:12
Patrick: What version of ie and firefox are you using? The colors are either identical or differs with a single step for each channel (rgb) for me.
January 17th, 2006 at 01:39
Is there a way to make the initialization automatic?
Removing the initialization code (see below) would make Canvas/FF and Canvas/IE look closer.
“window.onload = function() { ieCanvasInit(); }”
January 18th, 2006 at 01:54
I was modifying the CanvasGraph library to run on top of IECanvas, but ran into a possible bug. The “arc” method appears to be slightly different than the one in Firefox: the portion of circle that got drawn was the complement of what got rendered in IE.
Say for example, I draw a quarter circle with arc, IECanvas would actually render a three-quarter circle.
My workaround was to switch the startAngle and endAngle.
January 19th, 2006 at 21:49
And what about the drawWindow function ? are you intending to develop it ?
January 20th, 2006 at 04:02
drawWindow is a Firefox extension. It is really nice, maybe the old IE HTML thumbnail ActiveX control could be used to some extent?
There are other things that cannot be effiently emulated like the toDataURL() method.
January 20th, 2006 at 10:07
Hello Emil,
there is this excellent script from Cow’s Blog in:
http://cow.neondragon.net/stuff/reflection/
It basically uses the canvas tag and some javascript wizardry to produce image reflections, but only in browsers that support this tag, like firefox or safari.
Could your implementation of the “ie canvas tag patch” be “hooked” to such a script or any other script that uses the canvas tag (to “draw” stuff inside the html page) and therefore act as a converter?
Now, that would be a neat feature, wouldn’t it?
January 20th, 2006 at 19:10
The reflection script is a really nice use of the canvas tag. I believe this can be emualted in IE using the Compose filter.
January 23rd, 2006 at 17:33
Image reflections is easier to render in IE, using a combination of filters like this :
1. Original image
2. Reflect
January 24th, 2006 at 10:00
Thans Eric and rickman for your replies, however could you be a little more specific.
You see, my knowledge for javascript I’m afraid is limited to the include in the html template! How could these two techniques be combined?
Thanks in advance for any response.
January 24th, 2006 at 15:11
I’m sorry Fotis but it seems that my comments in this thread can’t include html tags and javascript.
February 3rd, 2006 at 21:10
Great code, great work! I made a couple of changes to fix some bugs and annoyances so I thought that I should post them:
ADDED: a clearAll method. Not supported by Gecko, but as VML cannot easily support clearRect I needed something. There is probably a better way to do this…
IECanvasContext.prototype.clearAll = function() { element.innerHTML = “”; };
FIXED: bug in arc method, some args not converted to int which caused scary things to happen and occasional crashes. Using Math.round on x1, x2, x3, x4, y1, y2, y3 and y4.
MODIFIED: moveTo and lineTo to use Math.round rather than parseInt to avoid rounding errors.
For example: parseInt(’5.9′) => 5 and Math.round(’5.9′) => 6
FIXED: stroke method to use o.strokeWeight = this.lineWidth; instead of o.weight = this.lineWidth; ala Sly’s comment on Emil’s site. Thanks, Sly.
February 6th, 2006 at 09:40
Math, sly: Thanks, I’ll post an update shortly!
February 10th, 2006 at 18:43
This is awesome, looking forward to the update. One question … has anyone tried using this with dynamically created canvases? I am creating a canvas using document.createElement on demand, which works in Safari and Firefox, but in IE the canvas doesn’t work … it seems canvas.context is defined and something like canvas.context.fillStyle has the correct inital value, but neither the canvas nor the context have methods so canvas.getContext() doesn’t work (for instance). Help please!!!
February 10th, 2006 at 19:44
further to my last comment … duh! this makes sense I think. After doing document.createElement(’canvas’), the behaviour is not applied for some non-trivial amount of time so called getContext is invalid until the behaviour has been applied. Not sure if the thread of execution blocks this until control is returned to the browser or not. In any case, by redesigning so my canvas is created early on, and the context is retrieved at some later time, it works.
March 12th, 2006 at 05:46
this is really cool.. by any chance, do you have an update yet?
March 12th, 2006 at 15:58
[…] Canvas in IE 使用 VML 加上 behaviours 來在 IE 上模擬 Canvas […]
March 14th, 2006 at 07:35
[…] Inspired by Emil’s emulation of the canvas tag in IE, I put together a simple SVG emulation behavior for IE. As with Emil’s code, I am making use of Internet Explorer’s VML support. The behavior will walk the SVG element structure and attempt to convert to appropriate VML elements. It’s far from complete, but it does a decent job. Supported features include: […]
March 20th, 2006 at 10:52
Could anybody please tell me what is the fastest way to plot 2D graphics in IE currently?
March 21st, 2006 at 01:33
[…] I was reading through some of today’s posts over at svg-developers and I came across Mark Finkle’s blog post about his SVG in IE project. He has a nice demo showing a client-side conversion of SVG to VML via behaviors. In an earlier post, he mentions that he was inspired by Emil Eklund’s Canvas in IE project. (It seems like everyone’s transcoding these days). I had been wanting to add VML as a supported renderers, so with the help of these two fine examples, I added VML support today: […]
March 28th, 2006 at 20:06
[…] Emil’s initial implementation uses a behavior. However, the canvas tag is not recognised in IE so you get a invalid DOM. The ExplorerCanvas does not use a behavior and it only uses one js file. This makes it a bit simpler and allows more control over the element. Normally, the canvas elements are initialized when the page is loaded but if you want to create canvas elements on the fly (or use them before the page has loaded) the following code should work: […]
April 5th, 2006 at 16:42
Nice Work!
is very interesting
THANKS
April 6th, 2006 at 17:16
This seems pretty fast in IE, would you have any brenchmarks against FF and IE?
April 6th, 2006 at 17:19
There are other things that cannot be effiently emulated like the toDataURL() method.
April 16th, 2006 at 08:33
[…] I’ve update the WebFX Chart widget to use the new, and superior, ExplorerCanvas IE Emulation layer instead of my old IECanvas one. […]
April 17th, 2006 at 14:11
IE6 is technically very good…
Over the last year or so, it’s occurred to me that IE6, in spite of it’s neglect since it was released in October 2001, is really an incredibly capable browser; much more powerful that any other in many ways.My reasoning is ……
April 18th, 2006 at 16:39
[…] http://me.eae.net/archive/2005/12/29/canvas-in-ie/ […]
April 20th, 2006 at 21:17
[…] IE: of course it doesn’t support it. someone tried writing a small javascript emulator but that was just an experiment and not a real project […]
May 16th, 2006 at 21:02
Emil,
Nice work, why not release this as a project on sourceforge or similar?
(Or has someone done this already?)
What I’d like to see is a library which changes it vector rendering depending on the browser being used:
IE: Use VML
Later versions of firefox: use canvas
Old browsers: Use wz_graphics
(We need this for a Geographic Map rendering engine at http://communitymapbuilder.org )
Has anyone looked into this?
May 16th, 2006 at 21:24
Cameron: It’s on sourceforge already, or rather ExplorerCanvas, which replaces Canvas in IE, is. See http://sourceforge.net/projects/excanvas
May 19th, 2006 at 18:13
This Canvas stuff is great
Is is possible using the canvas to create a “screen shot”
To save the content of a canvas as a .jpg or something of that nature
June 16th, 2006 at 12:24
Hi,
My name is srinivas , i am developer , recently i had seen your graphs , i downloaded ur stuff and i was trying to execute in IE 6.0 but i am getting the error object not supported, Could you please help.But it is executing when i am seeing in online demo
Regards
Srinivasa Rao S
Ph.No : 0919980132116
June 16th, 2006 at 12:54
Srinivas > Make sure your server is configurated to serve the HTC file with the correct content type. Also, you might want to look into ExplorerCanvas instead.
June 19th, 2006 at 08:47
Thanks Emil,
Finally , i got the output.Can u tell me is there any option for events to the individual part of the pie chart or tool tip for individual pie chart. Waiting for ur reply.
Thanks & Regards
Srinivasa Rao. S
June 19th, 2006 at 13:29
Srinivas > Glad it worked out for you.
As canvas is raster based, rather then vector based, no method for assigning events to shapes is present. However by analysing the mouse coordinate the “active” portion of the shape can be calculated and an event could be triggered.
August 2nd, 2006 at 10:27
[…] http://ponderer.org/download/canvas_demo/ simulación de la etiqueta canvas para ie tutorial sobre canvas en mozilla developer center 02/08/2006 desarrollo web ¡Comenta! […]
August 6th, 2006 at 02:40
Hello.
My first 2 webpage at my site was made with VML.
I had a like VML.
At the site a made a water fountain…
Let me know your opinion.
Thanks
August 10th, 2006 at 09:21
[…] PlotKit supports both HTML Canvas and SVG, along with an emulated canvas for Internet Explorer. […]
August 21st, 2006 at 17:06
What a great job you’ve done ;+)
I discovered your work from the OReilly book “Ajax in a nutshell”.
I’ve two questions :
- what is the equivalent constant value for the lineJoin property ?
I’ve tried the string constant (for example ’round’) but it doesn’t work
- About line width : setting
ctx.lineWidth = 10 ;
or
ctx.lineWidth = ‘10′;
doesn’t change anything… Still have a width of 1.
Thks
August 23rd, 2006 at 02:44
wonderful work indeed. Thanks.
August 24th, 2006 at 03:59
[…] This is just awesome: …Okay, so it’s a slightly ugly picture, why is it awesome? Read about it here: http://me.eae.net/archive/2005/12/29/canvas-in-ie/. Basically, Emil Eklund of WebFX extended IE to support Canvas elements, the currently most-buzzed new technology in web browsers. […]
September 19th, 2006 at 16:03
I am not able to print the images drawn using canvas tag. Please let me why this is happening?
September 29th, 2006 at 01:04
Also check this out: www.cumulatelabs.com currently only works in IE, but we have plans for firefox soon!
October 1st, 2006 at 22:38
[…] Use Canvas. Canvas was introduced in Safari and now in Firefox and Opera too. No sign of life in IE, but this there’s a fantastic hack (via Ajaxian) that emulates SVG using IE’s native VML support (more on VML below). […]
October 26th, 2006 at 15:48
Unless I’m missing something, this doesn’t work at all in IE7.
that said, there is a lot of stuff that doesn’t work in IE7.
October 27th, 2006 at 04:46
[…] 在指引下我去了Mozilla Developer Center去寻找传说中的canvas标签，他的原名称Canvas tutorial，粗略的看了一下使用的兼容性，使用的时候配合JavaScript脚本，在ff1.5以上可以直接使用，在ie下要加上 js 才能正常的 顯示效果。 […]
December 9th, 2006 at 21:20
Hi,
Your in IE work is just what I was looking for!
As I’m trying to learn JavaScript, I used your work in a little tool that plots graphs of mathematical functions:
http://home.scarlet.be/km/js/graph2.html
Ultimatly I want to integrate this in a calculator I work on:
http://home.scarlet.be/km/js/calc4.html
Regards,
K Moerman
Belgium
January 18th, 2007 at 22:27
Emil,
This works great but I am having a bit of an issue when I try to dynamically add canvas element.
I am using plotkit to create graph based on criteria selected by the user. One of the shortfall of plotkit is that it doesn’t (yet) print the name of the series with the attached color so in order to do that I dynamically create a table with 2 column and as many rows as I have series and in each row I put the name and a canvas. This works great with firefox but in IE I can not get the 2d context for those canvas. Is there a way to get that working using excanvas.js?
Thanks,
Eric.
February 13th, 2007 at 16:12
How Do you really setup the use of canvas on IE7
February 15th, 2007 at 20:28
Amazing work!!! Congratulation emil!!
and Steve i try in IE7, and i don´t have any problem.
Regards.
Mauricio from méxico.
March 28th, 2007 at 06:16
[…] Por enquanto essa tag canvas só existe no Firefox e Safari, mas existe um jeitinho pra rodar tudo no Internet Explorer usando o VML (um avô do SVG). […]
April 17th, 2007 at 08:25
[…] PlotKit: JavaScript Graph Plotting Library PlotKit from Liquidx is a Javascript graph plotting library. It is aimed at web applications that require plotting series of data in modern web browsers. Here’s a quick run down of the features and sample output: PlotKit requires MochiKit. (1.3 or higher) PlotKit supports both HTML Canvas and SVG, along with an emulated canvas for Internet Explorer. PlotKit is easily extensible to include other rendering engines, styles and layouts. Please pursue the documentation for more information. PlotKit is licensed under the BSD license, so you can include it in your free or commercial applications without worrying. Road map features include: Point plots Defined Event System Support Animation support For more information, you can check out: Google Groups: plotkit PlotKit Quick Start tutorial Full documentation Published Sep 17 2006, 09:25 AM by AjaxMatters […]
May 8th, 2007 at 19:27
just found this today, although i was looking for it 6 years ago
http://www.xml.com/pub/a/2000/07/26/deviant.html
May 22nd, 2007 at 13:08
@ Daniel:
Why you can’t try it? I made just one and it wasn’t difficult.
Or whar was your problem?
June 6th, 2007 at 16:10
I have a problem with ARC STYLE = PIESLICE, it’s render as CHORD style.
Where could I insert or modify this parameter?
June 14th, 2007 at 02:17
Thank you for this fantastic work!
I’ve come across a bug and was hoping someone could point me in the right direction. It seems that IE won’t render both a strokeStyle AND fillStyle when using the lineTo function.
Example:
var canvas = document.getElementById(’canvas’);
var ctx = canvas.getContext(’2d’);
ctx.fillStyle = ‘yellow’;
ctx.strokeStyle = ‘red’;
ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(1,1);
ctx.lineTo(80,80);
ctx.lineTo(100,20);
ctx.closePath();
ctx.stroke();
ctx.fill();
Only the stroke() function works. However, if I switch the order of the stroke() and fill() functions, then only fill() works. Any insight?
Thanks!
June 23rd, 2007 at 21:28
David: “Calling fill() or stroke() causes the current path to be used. To be filled or stroked again, the path must be recreated.”, see http://developer.mozilla.org/en/docs/Drawing_Graphics_with_Canvas
Also, IECanvas is no longer maintained, it has been merged with, and superseded by, ExplorerCanvas, see http://me.eae.net/archive/2006/03/28/explorercanvas/
September 26th, 2007 at 03:36
[…] Canvas in IE (VML) by Emil Eklund […]
October 1st, 2007 at 18:31
Stumbled across your neat solution. Looks like it is just what I need. Thanks a bunch.
BTW: Someone asked way back if there is a way to make the drawings appear automatically. The following works for me.
“window.onload = function()
{ ieCanvasInit(); setTimeout(’draw()’,500); }”
As I am new to this canvas (and iecanvas) is there a list of methods you’ve implemented, e.g., createLinearGradient(…) and createRadialGradient(…)?
October 5th, 2007 at 23:45
Printing problem is not solved!!
When you create an image using CANVAS it shows perfect in the screen and in the print preview, but when you print (both in PS and PCL printers it prints very small (about 100 px for an image of 600px-600px) and with incorrect colors.
Is there a way to print canvas objects correctly?
tks,
ted
November 1st, 2007 at 21:24
I have a problem with ARC STYLE = PIESLICE, it’s render as CHORD style.
Where could I insert or modify this parameter?
November 2nd, 2007 at 01:37
What is the memory consamption of a canvas? If I paint an image on a canvas will it consume the same resources when loading the image as BMP file?
November 3rd, 2007 at 13:17
wonderful work indeed. Thanks.
January 9th, 2008 at 10:52
[…] canvas 是一个新的 html 元素，用来做为程序代码绘图的画布。而且 JavaScript 就能设定各项绘图指令。不过在 IE 下必须加载 这个 js 才能显示效果。 […]
March 16th, 2008 at 22:25
Hi. Great work!
I’ve just started trying to implement an animated game replay as a web service, using Canvas in FF/Safari. It’s pretty fast and effecitve, and I want to port it to IE.
The excanvas.js library gets me some way there - I believe this was based on your work. However, the clearRect() only does a global clear. For major performance reasons, I really need to be able to clear previously drawn elements selectively, and then redraw those areas. Clearing the entire canvas and redrawing it from scratch gets painfully slow when trying to animate a complex view.
I could probably get by if clearRect just deleted all existing elements that intersect the specified rectangle, or that are entirely contained within it. (with maybe even a mode switch to select which?). Is this feasible? I’ve had a quick look at the way the elements are set up in VML, and it seems there’s no easy way to delete an individual item in a path. Should I create separate canvasses for each component of the view, overlaid in each other, so that I can clear a specific canvas? How is page performance affected by having lots of overlaid canvasses?
One other thing I found out - I had a CSS rule that applied to divs nested in the same parent as my canvas elements. That was overriding the CSS that excanvas defines for the VML div. It was easy to fix by making the CSS rule more explicit, but it may be worth noting for other users.
Alan