2009-03-22

New Explorer Canvas Release

The main reason for this release is Internet Explorer 8.0 support. IE8 slightly changed how it does VML so we had to do some fixes. We wanted to make sure that things worked OK in the final release of IE8 so we held of the release until IE8 was out.

Another big change in the Explorer Canvas project is that we moved to Google Code project hosting.

Besides from the IE8 support we've fixed a lot of bugs and improved Explorer Canvas in several ways. We'd like to thank everyone wh contributed to Explorer Canvas by providing bug reports, patches and or participated on the mailing lists.

The third release was cut from revision 48 and below is the change list for this relaese.

  • Implement transform and setTransform. This passes all the tests in the HTML5 canvas tests for 2d.transformation.*
  • Remove fallback content that caused some issues when resizing the canvas element.
  • Fix issue where strokeRect, fillRect and clearRect incorrectly cleared the current path.
  • Added 2 new tests and modified an existing test to ensure that the new code works as expected and tested this in all modern browsers
  • Fix for IE8. This involved passing one more argument to namespaces.add as well as ensuring all CSS lengths have units (px). Passes all the test cases in all modes in IE8.
  • Fixes for linear gradients.
  • Added two test cases for linear gradients.
  • Changed the calculation method of line width. An averaged line width is calculated from the determinant of matrix, which is valid even when transform() method is implemented someday.
  • Improved the rendering of lines. Lines with the width less than 1px look better now.
  • Fixed the bug that stroke() ignored lineCap, lineJoin and miterLimit when fillStyle attribute was set.
  • Removed the settings of strokeweight, strokecolor and fillcolor. They are unnecessary since they are overridden by the weight and color attributes in and .
  • This fixes issues where translate, rotate and scale is used during a path is being constructed. Previously we did the coord translations just before we draw the path. That is incorrect and now we do the translations when we add each individual piece to the path
  • Added very limited support for scaling of the stroke width. Currently we do the scaling by calculating the position in the final coordinate space and we therefore cannot do non uniform scaling of the stroke. For now we just do the max x/y scale factor.
  • Fix stroke. It should not close the path
  • Fix memory leaks
  • Fix issue where the path was not closed when strokeRect/fillRect was called.
  • Use the document.createElement('canvas') hack that was exposed by Sjoerd Visscher last week. This allows us to remove fixElement_ completely.
  • Added globalAlpha to the list of attributes copied for save/restore, as per the canvas specification.

26 comments:

  1. really great! i was waiting for this for only 3 days!! thanks

    ReplyDelete
  2. but i got troubles :(

    first i got and 'unknown runtime error' on line 144:
    el.innerHtml = '';

    i thought that may be it could work out if i just comment that line out.

    but then i got a 'Unexpected call to method or property access.' on line 311:
    surfaceElement.appendChild(el);

    ... and i do not think that it will work out anymore by just commenting that line out :(

    any ideas?
    thanks

    ReplyDelete
  3. I am having the same issues. Seems to me it's a DOM not loaded issue? Debugging now.

    ReplyDelete
  4. Yeah, same problem here... exception on line 144 "el.innerHTML" when calling g_vmlCanvasManager.initElement ...

    ReplyDelete
  5. What kind of element are you passing in to initElement? All the test cases work and innerHTML = '' should be fine on all canvas elements.

    ReplyDelete
  6. I know why you are seeing the issue with el.innerHTML = '' and I added a wiki page with instructions.

    The reason is that the trick to get IE to recognize canvas tags require that we we do a document/.createElemen('canvas') before the first instance of a canvas tag in the markup.

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. not working, yet :(

    i am using the G_vmlCanvasManager.initElement method!

    And the problem occurs exactly when calling it!

    ReplyDelete
  9. To be more precise, i have a webapp with jquery, excanvas and jquery.flot (http://www.moossen.net/en/about/mait/stats.html)

    it works with excanvas r2 in IE6 & IE7, but not IE8 (with no js error at all). but with excanvas r3 it does not work at all in any IE.

    here is the jquery.flot code:
    canvas = $('<canvas width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>').appendTo(target).get(0);
    if ($.browser.msie) {
    // excanvas hack
    canvas = window.G_vmlCanvasManager.initElement(canvas);
    }
    ctx = canvas.getContext("2d");

    help please!

    ReplyDelete
  10. I am seeing an issue in both ie6 and ie7 where calling drawImage multiple times on the same canvas causes unexpected spaces between the rendered images even though their coordinates are exactly next to each other. Also, in ie8, the elements are not immediately interactive on dom:loaded as they used to be.

    ReplyDelete
  11. Michael: That should work. Do you have a test case online?

    Ryan: We initialize all the canvas elements every time document.onreadystatechange fires. It is possible that the code you use to "fire" dom:loaded happens before our code and therefore the canvas is not initialized. I would also like to see a test case where drawImage fails.

    ReplyDelete
  12. So the problem seems to be in the context.translate area. I have a thorough test case for you here: test case. I'm gonna keep trying to nail down the specifics, but I thought I'd share the test case to get us on the same page. Many thanks for the efforts past and present.

    ReplyDelete
  13. Posted bugs on google code site with test cases. Rotate is shot in IE8

    ReplyDelete
  14. In my situation, adding the following was the only way to get the child element of the canvas to get it's dimensions set on load: In initElement - added: el.attachEvent('onpropertychange', onResize);

    ReplyDelete
  15. I was using excanvas 2 with a jquery plugin that previously worked under IE 8, but with the latest release, it yields the error on line 144 as mentioned above. I suppose the plugin (http://plugins.jquery.com/node/7292) will need to be updated to work properly with this version of excanvas.

    ReplyDelete
  16. Jerry: That one has been resolved. See http://code.google.com/p/explorercanvas/wiki/Instructions

    ReplyDelete
  17. Hi Erik,

    I do not really understand those instructions.. where does that code go? I am getting the unknown runtime error with el.innerHtml = ''; as well but I do not understand how to fix this. Can you please clarify?

    ReplyDelete
  18. Thought I would give you a URL if you wanted to see the problem I am having with IE 8... the pop-ups are being rendered without any background

    (http://olympicpeninsulawaterfalltrail.com/map)

    ReplyDelete
  19. Hi!
    Michael: when you said
    here is the jquery.flot code:
    canvas = $('<canvas width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>').appendTo(target).get(0);
    if ($.browser.msie) {
    // excanvas hack
    canvas = window.G_vmlCanvasManager.initElement(canvas);
    }
    ctx = canvas.getContext("2d");

    Try use it:
    var canvasHTMLDOM = document.createElement("canvas");
    jQuery(target).append(canvasHTMLDOM);
    if ($.browser.msie) {
    // excanvas hack
    canvas = window.G_vmlCanvasManager.initElement(canvas);
    }

    ReplyDelete
  20. I got the same err on surfaceElement.appendChild(el). I'm adding a canvas element dinamically and then I init with initElement. This worked on ie6/7 with excanvas 2 but now on excanvas3 is not working any more. Any ideas?

    ReplyDelete
  21. Hi
    Can anyone tell me how to save the xcanvas drawing image to the server.

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. I too had the same problem as others here - "Unknown runtime error" at the following line:

    el.innerHTML = '';

    I solved the problem by creating the "canvas" tag using :

    document.createElement("canvas")

    instead of :

    parentTag.innerHTML = '...'

    ReplyDelete
  24. I wrapped my canvas inside a pair of div tags to solve that annoying el.innerHTML=''; "unknown runtime error" bug.

    <div><canvas id='DrawingCanvas' width='100' height='100'></div>

    I'm using IE8.

    ReplyDelete
  25. Thanks a lot, I do like this code very much. However, currently I cannot use the clipping and arcto functions. Would you please show me a way to accomplish this?

    ReplyDelete
  26. Is there any idea to save in bitmap the vml code in canvas which is generate from exCanvas?

    ReplyDelete