Search code examples
javascriptfirefoxhtmlcanvasclip

Firefox Canvas - Artifacts in path drawing (possible clipping error)

I wrote a Canvas program using some "advanced" graphics features: http://pastebin.com/u5q0W876

It works fine in IE, Chrome and Opera. But in FireFox, it is possible to make an odd artifact appear:
~click in lower right (empty space)
~rotate outer ring (click on it)
~looks like http://img535.imageshack.us/img535/9503/fferr.jpg (see upper right)

I am sure the problem has to do with the function pencilStripes (which draws stripes over the entire screen, which are then clipped to a certain region). It's on line 162 and is used on line 77. But I don't know why FireFox has this error when the clipping works fine on all other browsers.

Solution

  • Adding c.moveTo(0,0) to the end of the pencilStripes function seems to fix it for me. But please don't ask why.