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
- 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.
19 comments:
really great! i was waiting for this for only 3 days!! thanks
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
I am having the same issues. Seems to me it's a DOM not loaded issue? Debugging now.
Yeah, same problem here... exception on line 144 "el.innerHTML" when calling g_vmlCanvasManager.initElement ...
What kind of element are you passing in to initElement? All the test cases work and innerHTML = '' should be fine on all canvas elements.
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.
not working, yet :(
i am using the G_vmlCanvasManager.initElement method!
And the problem occurs exactly when calling it!
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!
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.
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.
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.
Posted bugs on google code site with test cases. Rotate is shot in IE8
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);
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.
Jerry: That one has been resolved. See http://code.google.com/p/explorercanvas/wiki/Instructions
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?
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)
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);
}
Post a Comment