IE8 error "Unknown name"

[GoogleCodeExporter]

When including the script in IE8 it will produce an error in the console (and 
stop working) like this:

flashcanvas.js, line 24 character 56
SCRIPT16389: Unknown name.

I thought I'd try the same with the source version, and the same error pops up 
at line 777.

I tried putting the script in the HEAD and at the bottom just above my project 
javascript. Either produce the error.

Looking at the call stack, the error is coming from line 1008, in toDataURL, 
which is exactly the reason why I moved from excanvas to flashcanvas :(

In my setup, Flash is functioning normally. No weird filters or anything. I'm 
running Flash 11.5.502.149 on Windows x64 and (obviously) IE8. Honesty requires 
me to say that this is IE10-preview in IE8 mode. 

Any help?

Original issue reported on code.google.com by thany81 on 8 Feb 2013 at 3:21

[GoogleCodeExporter]

Update, on a native IE8 on Windows XP, I'm getting the same error. But it 
provides a little bit more information...

Unfortunately, this XP installation is not English, so loosely translated, I'm 
getting this:

Message: Cannot set the property backgroundColor. Invalid value for property.
Line: 777
Character: 11
Code: 0
URI: .../includes/script/flashcanvas.js

Original comment by thany81 on 8 Feb 2013 at 3:45

[GoogleCodeExporter]

Another update: this doesn't happen when using actual `<canvas>` elements in 
the HTML. It does go wrong when creating canvas elements through 
document.createElement, even if I add them to the DOM, as instructed in the 
wiki.

Original comment by thany81 on 8 Feb 2013 at 4:26

[GoogleCodeExporter]

Attached test case.
Please try it in a modern browser too. The third logo should be colorized in 
pink.

WHEN flashcanvas works, I'm seeing a solid pink image, which is another thing 
that doesn't work.

Have fun fixing this :)
Feel free to ask for more info.

Original comment by thany81 on 8 Feb 2013 at 4:36

Attachments:

• flashcanvas-errors.7z

[GoogleCodeExporter]

First, you need to use FlashCanvas Pro, if you'd like to use 
globalCompositeOperation.
http://flashcanvas.net/docs/canvas-api

I tried your test case in my computer, but it didn't cause any error. I guess 
that your problem is a timing issue because the problem didn't occur when you 
used <canvas> elements embedded in the HTML. What happens if you wait until the 
canvas element becomes ready in the following way?

    var canvas;

    window.onload = function() {
        canvas = document.createElement("canvas");
        document.body.appendChild(canvas);

        if (typeof FlashCanvas != "undefined") {
            canvas.onload = main;
            FlashCanvas.initElement(canvas);
        } else {
            main();
        }
    }

    function main() {
        ......
        var ctx = canvas.getContext("2d");
        ......
    }

As for the resulting pink rectangle, you should understand that drawImage() of 
FlashCanvas is executed asynchronously while toDataURL() is executed 
synchronously. That is the reason why toDataURL() returns a result, in which 
the drawImage() is not yet processed. To solve this problem, you should use 
loadImage() method with callback function.

    if (typeof FlashCanvas != "undefined") {
        ctx.loadImage(imageSrc, draw);
    } else {
        draw();
    }

    function draw() {
        ......
        ctx.drawImage(imageSrc, 0, 0);
        var data = ctx.toDataURL();
        ......
    }

When I rewrote your code as above, I could get the same result as that of 
modern browsers.

Original comment by revu...@gmail.com on 8 Feb 2013 at 6:21