Monday, March 27th, 2006

Google puts the Canvas in IE

Category: Canvas, Editorial

We discussed Canvas in IE when Emil Eklund did a proof of concept.

Benjamin Joffe has taken the baton and recently announced that Google has got canvas for IE, and that it will soon be seen on code.google.com.

IE 7 doesn’t step up to the plate? Google comes in to finish the job. We will soon be able to test it out and see if this is solid enough to use Canvas cross browser in peace.

( via Dave Hoover )

Posted by Dion Almaer at 8:12 am
13 Comments

+++--
3.9 rating from 52 votes

13 Comments »

Comments feed TrackBack URI

Some guy has already done this. Look at this URL:
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

Comment by Rikki Carroll — March 27, 2006

That’s not the same thing.

My understanding (and this comes from a little bit of inside info) is that the canvas stuff will still render a bit slower on IE; it’s the nature of the beast. Also it isn’t completed; there’s some issues with the rendering of arcs (which is kind of a PITA to deal with, particularly the VML model).

Comment by Tom Trenka — March 27, 2006

This has been done, and is called IECanvas:

http://me.eae.net/archive/2005/12/29/canvas-in-ie/

It is bundled and used in some JS charting stuff around the net.

Comment by Steven Roussey — March 27, 2006

I think this is what will be release to code.google.com http://me.eae.net/archive/2006/03/28/explorercanvas/

Comment by Henry — March 28, 2006

Actually it was something written in a few days by Erik Arvidsson and Glen Murphy based on the work that both Erik and Emil have done in the past, as well as Emil’s more recent work.

Comment by Tom Trenka — March 28, 2006

When you check the ExplorerCanvas sf page, “Google Opensource Programs” is listed as admin and developer. I guess that make it a official opensource project.

Comment by Henry — March 28, 2006

Some specific observations on excanvas_0001.
1. the canvas arc method is implemented using the VML command ar.

However, the definition of arc corresponsponds to VMLs at/wa.

Using ar has the consequence that closed paths including one or more arcs may not be filled correctly.

2. Related to the above, the direction of an arc in VML should be specified using at or wa as appropriate. Reversing the angle may not give the correct result since the implied lineTo will join to the wrong end of the arc.

3. When a canvas element is created dynamically, it’s currently necessary to initialize the element by passing it as a parameter to the method G_vmlCanvasManager.initElement.

It may be helpful to modify the initElement method so that it returns a reference to the new canvas element (e.g. by appending the statement return el;).

The initElement method can then be used on a dynamically created canvas element as follows:

myCanvas = G_vmlCanvasManager.initElement(myCanvas);

Comment by nick — March 29, 2006

[…] According to a post on Ajaxian, ExplorerCanvas will soon be available from code.google.com. […]

Pingback by ExplorerCanvas » Web 2.0 Blog — March 30, 2006

[…] Ajaxian Canvashtml> function draw() { var canvas = document.getElementById(”canvas”); var ctx = canvas.getContext(”2d”); ctx.fillStyle = ”red […]

Pingback by Ajaxian Canvas - Canvas — May 14, 2006

[…] Ajaxian Canvashtml> function draw() { var canvas = document.getElementById(”canvas”); var ctx = canvas.getContext(”2d”); ctx.fillStyle = ”red […]

Pingback by Potomac Canvas, Woodbridge Virginia - Canvas — June 7, 2006

[…] Ajaxian Canvashtml> function draw() { var canvas = document.getElementById(”canvas”); var ctx = canvas.getContext(”2d”); ctx.fillStyle = ”red […]

Pingback by Cedar and Canvas Adventures - Canvas — July 5, 2006

The problem with IECanvas is that it’s not a canvas object. The google one attempts to create the canvas object for IE just the way it works in FF/Safari. If you are using FF/Safari it doesn’t even load the IE code – it’s just business as usual.

Comment by Hardly Noticable — February 22, 2007

I wouldn’t rely too much on libraries like that… VML is a very, very different architechture to canvas, so you gotta program it differently depending on what you’re doing. Example: I made a canvas game (http://www.blahbleh.com/pull.php) with motion blur. Every frame, it does not clear the whole thing – it just puts a semi-trans. white rect over it. On IE, that would quickly crash with DOM overload. If you’re looking for optimised code, if it needs to be fast, this isn’t it. For a chart, sure.

Comment by blahbleh — February 27, 2007

Leave a comment

You must be logged in to post a comment.