IE Browser Support via ExplorerCanvas integration

[jmwhite999]

I know there is already an issue #55 (about trying to load the easel.js via IE and throwing errors).
As daniellmb notes in that issue post:
"Internet Explorer 6, 7 and 8 still make up about 57% of the browser market."
You really HAVE TO DO SOMETHING about IE support if you expect Easel.js to move out of the
"experimental" code and into the browser mainstream. (sorry to have to shout but no way to bold)

Of course IE6-8 doesn't have canvas support, but here is my proposal -
there is a project that uses javascript and Microsoft's IE proprietary vml scripting to simulate canvas events.
It's called explorercanvas:
http://excanvas.sourceforge.net/
Yes you take a performance hit but sometimes you can get canvas stuff to run using this library. At least its something..
Is there any chance that the easel.js code could be annotated to show where explorercanvas code could be substituted for easel.js code if the browser detected is IE?

[Zettersten]

I vote that we do not support the ex canvas project. Build a flash game if you HAVE TO DO SOMETHING about ie. Or display an upgrade message.

[jmwhite999]

Have you read Apple's "Thoughts on Flash" (that tries to explain why they won't provide flash support on Apple mobile devices):
http://www.apple.com/hotnews/thoughts-on-flash/

Unfortunately Microsoft doesn't allow WinXp users to upgrade past IE8 to IE9 (which has canvas support).
Are you telling users upgrade your operating system just so you view my web pages the way I designed them?
Displaying an upgrade message is like saying I'm a failure as a web developer and because of my failure you have to find/use a workaround. Unacceptable!.

[Zettersten]

That's exactly what I'm telling you to do.

[jmwhite999]

What you are telling me to do is not acceptable! (and I refuse to comply!)
I consider your comments regarding this issue to be completely contrary to fixing the issue.
My "workaround" until this critical omission (and fatal flaw) is rectified is to simply not use easel.js at all.
The only "comment" in this issue thread that is any value is someone promising to include the code necessary to provide easel.js with canvas support in IE6-9. I consider all other comments to be invalid.

[Zettersten]

Dude you are really weird.

Couple things,

1. EaselJS is a flash-like set of APIs ported over to JavaScript to manipulate the browser's canvas element.
2. Canvas is apart of the HTML5 spec (http://dev.w3.org/html5/spec/Overview.html#the-canvas-element).

Internet Explorer versions 5,6,7, and 8 do not support the canvas element nor any other HTML5 specs. They will never support the element and specs.

While the Excanvas project attempts to bring canvas functionality to browsers that do not support canvas, it is frowned upon to try and deliver any experience greater than drawing lines and circles to that browser.

Excanvas has to fake what is provided natively by your modern browsers.

Supporting IE 5, 6, 7, and 8 is a dumb idea because it will never run optimally.

The bottom line is,
Use flash if you want to support older browsers! We see this type of fallback in a lot of modern projects (take socket.io for example).

If you're so set on creating an HTML5 experience then you MUST urge and give your visitors a message indicating that its time to upgrade. Have them install Chrome / Firefox on XP if Microsoft won't deliver IE9.

[alekstorm]

@jmwhite999 I had a patch to add Explorer Canvas support to EaselJS; I'll try to dig it up for you.

@erik5388 We do not all have the luxury of designating certain browsers (which have significant market share) as unworthy of our product. Often, suboptimal canvas support is better than none at all, and falling back to Flash is not forwards-compatible. The browser holy wars are long over; decisions on which browsers to support are best left to the users of the library, not the maintainers.

[jmwhite999]

To alekstorm,
Thank you - please let me know when the patch is added and any associated revision number (so I know what to download).

I totally agree with your comment to erik5388:
"Often, suboptimal canvas support is better than none at all, and falling back to Flash is not forwards-compatible."

[alekstorm]

@jmwhite999 The changes are in #100, which you can use until it's merged.

[jmwhite999]

Thanks for taking the time to do this and look forward to the merging.

[jmwhite999]

I tried to do a merging on my local hard drives and test the new game.html and it wouldn't display anything on the canvas at all in either IE8 (Version 8.0.6001.18702) or Firefox (version 3.6.25) so I downloaded the last release package, "EaselJS_v0_4_0.zip" from this page:
https://github.com/gskinner/EaselJS/downloads

..and it worked fine in Firefox (but of course not in IE8),
so I merged in all the js files from the DIFF tab of the alekstorm #100 pull page:
https://github.com/gskinner/EaselJS/pull/100

..together with the files from the above zip and it was still working in Firefox,
so then I slowly (one by one) merged all the js (javascript files) from the off the sub folders off the current gskinner master src easlejs branch:
https://github.com/gskinner/EaselJS/tree/master/src/easeljs

..then I found the file that was causing the game not to display anything on the canvas in firefox.
It was the container.js file.
However the good news is I was able to successfully merge all the other current gskinner master src easlejs branch files with the alekstorm files and everything else worked fine in firefox (although no canvas-emulation showed in my version of IE8).

The non-working container.js file is 18743 bytes (dated 01.16.2012)
The working container.js file is 17212 bytes (last modified 11.28.2011)

I don't know enough about the differences in the javascript between the two container.js files to know exactly what is causing the new container.js file not to show anything on my version of Firefox, but just to give a heads-up there may be some issues after the merging - we'll have to see..

[alekstorm]

Right, that's a separate issue that I forgot to create another pull request for. Try merging #101 into your local copy.

[jmwhite999]

I have uploaded the merged files (EaselJS_v0_4_0.zip files with alekstorm #100 files) to my scratchpad site.
I tested in the current portable version of firfox as well as various 3.6.x version I have on different computers and it seems to work fine on all versions of Firefox (as well as the versions of Opera, Chrome and SFWare Iron that I'm using).
Here's the game test link:
http://xellextech.com/easel/EaselJS_v0_4_0/EaselJS_rev1/examples/game/game_as_rev.html

So if anyone wants to do some testing in IE8 (rather than IE9 in IE8 emulation mode) and maybe offer some suggestions to get something showing up on the canvas --note: I did notice there were a couple white pixels in the upper left edge of the canvas, so maybe the code is partially working somehow...
Here's what I'm seeing in IE8:
http://xellextech.com/easel/screenshot_easel_game_in_IE8.JPG

[alekstorm]

You should be merging these patches into the latest revision from the git repository, not the 4.0 release zip file. You can then upload your own version of the repository to GitHub, which makes it much easier to compare notes. If you're not sure how to do this, try googling around for a git tutorial.

With the performance hit on IE8, heavy canvas animation (as in a game) is probably a bit overreaching. I'd stick to generating static images or simple animations where lag is unlikely to be noticed. That said, there may be other, non-performance-related bugs we could work on that the game example exposes. But it will never run fast enough to make Asteroids playable.

[bennycode]

Hey guys, what is the current status? I really like the idea to use EaselJS together with "ExplorerCanvas". Is there any progress in terms of integration?

[jmwhite999]

To bennyn,
I'm still waiting on alekstorm and the EaselJS team, to work on "other, non-performance-related bugs we could work on that the game example exposes" (see alekstorm's last post above).
Meanwhile I am paid my money to license the ImpactJS code that is used for the Biolab Disaster game:
http://playbiolab.com/
http://impactjs.com/
It's a shame alekstorm has admitted defeat (for something that is obviously technically possible),
when he says"it will never run fast enough to make Asteroids playable".
Note: I do still use Explorer Canvas, but I use a special version that offers more robust rotations under IE8 than the main "trunk" version of Explorer Canvas. You can find a demo page here:
http://xellextech.com/DrawImage/drawimage.html

[alekstorm]

@jmwhite999,

I'm not sure why you linked to the Impact site, since that library apparently does not support IE<9. I am not involved in the development of ExplorerCanvas, which is where any performance bottlenecks would be found. If it is indeed "obviously technically possible" to make a game engine run at playable speed on top of ExplorerCanvas, I encourage you to implement the necessary changes - here's the project page. For starters, I'm sure the devs would appreciate your contribution of better rotation routines.

[jmwhite999]

Hi alekstorm,
The reason I linked to ImpactJS is that at this point, even without support for earlier versions of IE, it represents in my mind, the best possible javascript library (performance-wise) for developing HTML5 Canvas games, and hopefully can be considered a good benchmark for what EaselJS could possibly achieve even if the suggested integration of EaselJS with ExplorerCanvas is not fully realized.
Eventually all those Internet users using IE8 and earlier will switch over to IE9 or later, and then backward compatibility issues with IE6-8 will eventually go away. IE6 use stands at 7.1% worldwide according to the http://www.ie6countdown.com/ site. Hopefully once IE6 use goes below 1% hopefully they'll switch over to IE7 and IE8 countdowns. As a web designer I look forward to the day that every IE user can have HTML5 support and a high degree of compliance withe the W3C HTML specs.
I have sent emails with code suggestions to the project people associate with the ExplorerCanvas project but have received no positive affirmation they were welcome. Most of the ExplorerCanvas files are from 2009 with few fixes for issues opened in 2010 and later being released.

[jmwhite999]

Hi alekstorm,
The reason I linked to ImpactJS is that at this point, even without support for earlier versions of IE, it represents in my mind, the best possible javascript library (performance-wise) for developing HTML5 Canvas games, and hopefully can be considered a good benchmark for what EaselJS could possibly achieve even if the suggested integration of EaselJS with ExplorerCanvas is not fully realized.
Eventually all those Internet users using IE8 and earlier will switch over to IE9 or later, and then backward compatibility issues with IE6-8 will eventually go away. IE6 use stands at 7.1% worldwide according to the http://www.ie6countdown.com/ site. Hopefully once IE6 use goes below 1% hopefully they'll switch over to IE7 and IE8 countdowns. As a web designer I look forward to the day that every IE user can have HTML5 support and a high degree of compliance withe the W3C HTML specs.
I have sent emails with code suggestions to the project people associate with the ExplorerCanvas project but have received no positive affirmation they were welcome. Most of the ExplorerCanvas files are from 2009 with few fixes for issues opened in 2010 and later being released.

[jmwhite999]

Sorry about the double posting..was on a flake-y wifi connection.

[pr1ntr]

Can't you just add a try catch to the code that tries to get the canvas? Nobody is expecting this lib to work in a browser that doesn't support canvas. Personally, I would like easeljs to not throw a bunch of errors when the scripts are loaded into a page with no canvas support. It should just load as normal and then return an error if you try to instantiate any of the objects and let the developer handle them as needed.

[gskinner]

Here's how I have chosen to approach it.

EaselJS's core focus is absolutely canvas enabled browsers, and we will not be spending a lot of time or effort on older browsers without canvas support.

However, what I have done is make it easier for others to plug in alternate canvas implementations (like explorerCanvas) so that they can do so if they choose. This is via an optional "createCanvas" method exposed in the createjs namespace.

Anywhere that EaselJS uses a canvas, it will check for this method, and if one is defined, it will call it to get a canvas. If not, it will use the default document.createElement("canvas") approach. This lets developers interested in supporting older browsers do something like this:

createjs.createCanvas = function() { return new ExplorerCanvas(); }

Obviously this can be expanded with browser checks and such.

Respectful feedback is welcome.

Cheers,
Grant.

[sorabh86]

Firstly, thanks for solutions given by @gskinner.
I don't think its will works, peoples now adopting others js frameworks for HTML5 game development those are better and also written in sense of cross-browser compatibility. They also don't leave any gaps on cross-browser compatibility.
Developer of this project must be good at OOPS, if you do fixed excanvas problem, then next problem will be Event Models used in project, upto ie 8 there is only one phase for listening events, back to ie 6 there is no Event Models just object literal callbacks, If you fixed Event Models problems, then there is More problem, if this project works side by side with jquery, it will be the best and top-most project for html5 game development. but crafty started one or two year after but now on top of this.

[gskinner]

@sorabh86 Thank you for the feedback.

Given the increasing rarity of browsers that don't support canvas, and the massive performance disparity when trying to fall back to alternative solutions (excanvas, css, etc - over 10x slower), increasing support for these older browsers is not a priority at all for this project.

This gets even worse when you consider our new WebGL renderer, which for certain types of content will raise that gap by another full order of magnitude (approaching 100x or more).

Putting major limitations on the future direction of EasellJS, and diverting large amounts of engineering in order to support browsers that are 4 major versions old doesn't make a lot of sense in my opinion.

[sorabh86]

@gskinner Thanks for quick reply.
You know well enough, as a developer, if i do work for any client he always cry-ed, for those issues. so there is two choices we have give him both html5 and flash game with fallback system, which will increase lots of extra work, it will be slower on those old ie, only when real user try to play that game, but client always test his application on better system with old browser, those are not that much slower, atleast he satisfy and leave payment without headache of create fallback to flash.