Question

I have been playing around with a very simple HTML5/Canvas based drawing app, just for the browser. I am setting it up as a proof of concept to play around with different programmatic drawing effects and such. However, I running into an issue, namely a SecurityError, when I try to grab the ImageData from the canvas 2d context.

Now, I know all about the security issues with cross-browser content and running on a webserver with local content and all that. This is not my issue. I am using no images. And the weirder thing is that I can grab the ImageData in some places in my code, but not others. Specifically, not within a function, which is where I want to.

Here is a fork of my code:
http://jsfiddle.net/grimertop90/77Z42/
Feel free to play around, and try drawing on the canvas.

(Note: I have been developing in Chrome and it works fine, but I just tried running it in Firefox and it seems to have issues. For my purposes, please just check it out in Chrome.)

If you look though the JavaScript, you should see three points marked “Case 1”, “Case 2”, and “Case 3”. These are the three points in my code where I have attempted to grab the canvas’s ImageData. Cases 1 and 3 work; Case 2, the important one, does not. Case 1 is during initialization. Case 3 is upon a user’s button click. Case 2, the broken one, is fired when a certain number of points have been drawn on the canvas.

I have no clue what the issue might be, especially since it work in 2 out of 3 places.

Answer 1

Your code works fine, your only problem are the missing arguments in the arcSketch call. Currently you have:

if (points.length >= 100) { arcSketch(); }

Just change it for

if (points.length >= 100) { arcSketch(x,y); }

You were trying to call ctx.getImageData(Nan, Nan, 200, 200) which was throwing the error.
You can see it working here