« JS Generics | Main | Going to Microsoft »

ExplorerCanvas

Over the last few months, me, Glen and Emil have been working on an open source version of canvas for Internet Explorer.

The implementation uses VML and IE style filters (for image rotation, rgba and globalAlpha). It implements most of the specification but some areas are a not implemented (for example composite drawing, patterns, radial gradients, coord size and clearRect clears everything).

Glen writes how this project evolved over the months. He also links to a demo that he wrote. We should really link to more demos but one thing at a time. For example most of the demos written for the Mozilla Developer Center canvas tutorial works by just including the js file.

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:

var c = document.createElement("canvas");
document.body.appendChild(c);
// we need to init this for IE
if (typeof G_vmlCanvasManager != "undefined") {
  G_vmlCanvasManager.initElement(c);
}

There is one more quirk. The canvas elements are recreated when initialized so do not store a reference to them before they are actually used.

This entry was posted on Tuesday, March 28th, 2006 at 12:05 and is filed under DHTML, Google, Internet Explorer, JavaScript, Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

17 Responses to “ExplorerCanvas”

  1. Kevin Yank Says:
    March 28th, 2006 at 23:40

    Your SourceForget project link is wrong.

  2. Dean Edwards Says:
    March 29th, 2006 at 10:58

    This looks really good. It’s about time we released the Web Forms 2.0 stuff I guess.

  3. Erik Arvidsson Says:
    March 29th, 2006 at 21:56

    Thanks Kevin. I’ve now fixed it.

  4. Martijn Says:
    March 30th, 2006 at 15:27

    Very impressive!

  5. callum Says:
    March 30th, 2006 at 16:39

    Great job on the canvas work!

    http://ubrowser.com/screenshots/ub-3dcanvas.jpg
    3d on a canvas in a browser on a texture on a flag in an app etc.. :)

  6. Something Witty Goes Here » Blog Archive » Cross-Browser Drawing API Lands Says:
    March 31st, 2006 at 18:50

    [...] Check it out. Glen, Erik and Emil have been working on implementing Canvas in Internet Explorer. Looks like that’s done and now up on SourceForge: Download here. Brilliant! I only hope it’s not a cruel April Fool’s Joke. [...]

  7. Mark Kahn Says:
    April 5th, 2006 at 11:49

    There’s a bug when drawing an arc in contextPrototype.arc.

    yEnd occasionally comes out to a non-whole number like 29.9999999997. If this happens only a single pixel of the arc is actually drawn. Simple solution is to round yEnd, although it looks like a floating point problem so rounding xStart, yStart and xEnd as well couldn’t hurt.

  8. Mark Kahn Says:
    April 5th, 2006 at 12:12

    wish I could edit…

    Anyway, the ultimate problem is this:

    var yEnd = aY + (Math.sin(aEndAngle) * aRadius);

    aEndAngle is 2*Pi, so Math.sin(aEndAngle) -should- evaluate to 0. It doesn’t since Math.Pi is a floating point. It evaluates to a very small number (e-16 or so). When aRadius is large enough in an inverse relation to the aY it actually does the math and comes up with 2.9999999999997 for example. Often times aY+2.9…97 will evaluate to aY+3 so it’s not always an issue.

    I would say just drop the calculations for yStart and yEnd and set them to aY, but I guess you need it for whenever partial arcs are implemented.

    So rounding is the best solution I can come up with.

  9. Erik Arvidsson Says:
    April 5th, 2006 at 23:34

    I thought we did rounding on all numbers. I’ll take a look at this.

  10. Erik Arvidsson Says:
    April 5th, 2006 at 23:37

    Yeah, the rounding is done in the stroke method.

  11. Mark Kahn Says:
    April 6th, 2006 at 8:02

    Yeah, it looks like you are, but you’re rounding the wrong way. You’re flooring everything in stroke which causes 29.99…7 to be 29 which causes the bug.

    Simple test: draw a large circle (stroked) on the top left of a canvas. It’ll be invisible except for a small like at 0 deg (the right side of the circle).

  12. Erik Arvidsson Says:
    April 8th, 2006 at 0:24

    We just fixed this. Previously the lines where off by a half pixel as well and sub pixel rendering didn’t work very well.

  13. R Mowatt Says:
    December 21st, 2006 at 10:06

    Im having the same problem as the one noted above. Have you released the updated version? The only version I can find is the original.
    Thanks!

  14. Relentless Media » Mutating Pictures Says:
    October 1st, 2007 at 2:43

    [...] some Google code in the background: to emulate the Firefox canvas model on Internet Explorer, the ExplorerCanvas library is used when you’re accessing the site with IE (and delivers VML, the IE-native [...]

  15. Taree Internet » Blog Archive » Mutating Pictures Says:
    October 1st, 2007 at 2:57

    [...] some Google code in the background: to emulate the Firefox canvas model on Internet Explorer, the ExplorerCanvas library is used when you’re accessing the site with IE (and delivers VML, the IE-native [...]

  16. Mutating Pictures | 精文斋 Says:
    October 2nd, 2007 at 9:01

    [...] some Google code in the background: to emulate the Firefox canvas model on Internet Explorer, the ExplorerCanvas library is used when you’re accessing the site with IE (and delivers VML, the IE-native [...]

  17. lopez Says:
    June 10th, 2008 at 1:08

    if (typeof G_vmlCanvasManager != “undefined”) {
    G_vmlCanvasManager.initElement(c);
    }

    THANK U SOOOOO MUCH :)
    lopez

Leave a Reply