ExplorerCanvas 17

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.

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

    Your SourceForget project link is wrong.

  • http://dean.edwards.name/ Dean Edwards

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

  • http://erik.eae.net Erik Arvidsson

    Thanks Kevin. I’ve now fixed it.

  • Martijn

    Very impressive!

  • http://ubrowser.com callum

    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.. :)

  • Pingback: Something Witty Goes Here » Blog Archive » Cross-Browser Drawing API Lands()

  • http://www.jslibrary.org Mark Kahn

    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.

  • http://www.jslibrary.org Mark Kahn

    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.

  • http://erik.eae.net Erik Arvidsson

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

  • http://erik.eae.net Erik Arvidsson

    Yeah, the rounding is done in the stroke method.

  • http://www.jslibrary.org Mark Kahn

    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).

  • http://erik.eae.net Erik Arvidsson

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

  • http://mowattmedia.com R Mowatt

    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!

  • Pingback: Relentless Media » Mutating Pictures()

  • Pingback: Taree Internet » Blog Archive » Mutating Pictures()

  • Pingback: Mutating Pictures | 精文斋()

  • lopez

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

    THANK U SOOOOO MUCH :)
    lopez