getImageData() wont work with an off screen canvas created with JS createElement()

[GoogleCodeExporter]

What steps will reproduce the problem?

    // Create a canvas element
    var offcanvas = document.createElement('canvas');

    if (typeof FlashCanvas == "object") {
        FlashCanvas.initElement(offcanvas);
    }

    offcanvas.width = 100;
    offcanvas.height = 100;

    var offctx = offcanvas.getContext('2d');

    // This line will toss a JS "Error: Unspecified error."
    var imageData = offctx.getImageData(0, 0, 100, 100);

What is the expected output? What do you see instead?

getImageData should work with a canvas created with createElement()

What version of the product are you using? On what operating system?

Flashcanvas v1.4,  Windows XP, IE 8.0, Flash 10.1.102.64

Please provide any additional information below.

getImageData() appears to work fine with a canvas that is on screen, but 
doesn't work with an off screen JavaScript created one.  

Original issue reported on code.google.com by Radishwo...@gmail.com on 17 Nov 2010 at 1:03

[GoogleCodeExporter]

You must append the canvas element to the DOM tree when you use FlashCanvas 
library. For example, the following code works with FlashCanvas.

    var canvas = document.createElement("canvas");

    // Append the canvas element to the DOM tree
    document.body.appendChild(canvas);

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

    canvas.width  = 100;
    canvas.height = 100;

    // Hide the canvas
    canvas.style.display = "none";

    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 10, 10);

    var imageData = ctx.getImageData(0, 0, 10, 10);
    alert(imageData.data);

Does this code solve your problem? If everything is OK, I'll close this issue.

Original comment by revu...@gmail.com on 17 Nov 2010 at 2:41

[GoogleCodeExporter]

Thanks for the quick reply!

Yes, that works.  But the problem is we need an "off screen" canvas that we can 
draw to without displaying it on the page, then using getImageData and 
putImageData, transfer to an "on screen" canvas.  I tried: 

    offcanvas.style.visibility = 'hidden';    
    document.body.appendChild(offcanvas);

But this causes the same error.

Any other ideas?

BTW FlashCanvas is great, nice work!

Original comment by Radishwo...@gmail.com on 17 Nov 2010 at 3:39

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Uh... I think I showed you an example of "off screen" canvas. My code contains 
the following line:

    // Hide the canvas
    canvas.style.display = "none";

If you comment out the line, a small blue square will appear on the screen.

Note that we cannot hide a canvas element before initializing the element, 
though I don't know the exact reason.

Original comment by revu...@gmail.com on 17 Nov 2010 at 4:51

[GoogleCodeExporter]

Oops, my bad, I missed that line of code.  Sorry :-)

Works great, thanks for the help. 

OK to close this issue.

Original comment by Radishwo...@gmail.com on 17 Nov 2010 at 3:53

[GoogleCodeExporter]

Original comment by revu...@gmail.com on 17 Nov 2010 at 11:32

• Changed state: Done