Canvas code not working in IE9 - probably alpha or globalCompositeOperation issue

I have a javascript routine which is designed to flickering sun rays. The routine creates 'numRays' rays, then begins to overwrite the rays using globalCompositeOperation = 'copy' and drawing a transparent ray over the oldest ray.

You can see the program here:Sun Ray Page

JSFiddle.net code located here:JSFiddle Sun Rays (I'm not sure how to make it work on JSFiddle, so if someone can fix my fiddle, I'd appreciate that, too.)

(Note: I have left a yellow stroke around the erased rays for diagnostic purposes, so you can see 开发者_开发问答them executed.)

The code works in Chrome and Firefox, however, in IE9, the original rays are not drawn when I leave the erase section active. In other words, if I remark out the section that creates the erase stroke, the ray fills occur. If I do not, then only the erase strokes occur.

I have tested various fixed alpha values and IE9 seems to handle them perfectly. I've set both sections to globalCompositeOperation = 'source-over' and still do not get the original rays.

Can someone help me correct this code to work on IE9?

Thanks

---

It isn't working in jsfiddle because you never call init()

IE9 is probably breaking script execution on the line:

ctx.rotate(rayArray[currentRay]); // Rotate to the rayAngle

Because it throws an error the first 11 times it is called, because you keep trying to access a value that is undefined the first 10-11 times through.

So I moved your incrementing code down to after the ctx.rotate statement and added the init. It doesn't have errors in IE or FireFox, but I have no way of knowing if its what you intended:

http://jsfiddle.net/Y5Y48/18/