Lately I've been working on a
HTML5 Jigsaw Puzzle. During this process I've learned a lot on how to write high quality JavaScript code. I've also found a lot of differences between browsers in their implementation of the HTML Canvas standard.
As an example, Firefox has problems with the
globalCompositeOperation property. (
demo) As described by
Beej, Firefox renders some composition operations incorrectly, making it harder to make the masks I needed for my jigsaw puzzle pieces.
When drawing the paths for the pieces themselves, I encountered problems regarding the
arcTo function using IE9. Although MSDN has the
best documentation for this particular function, their implementation was not completely up to par. The arc itself was drawn correctly, but the path state was not updated in the same way as in the other browsers. Other browsers update the current position of the pen to be at the endpoint of the arc after drawing it. This does not happen correctly using IE9. When I draw two arcs in succession, they both start at the same position, with the end result looking like a sawtooth instead of a rounded edge. Therefore I had to add a lineTo call inbetween in order for the pen position to be updated after drawing the first arc.
It is said that one of the intents of HTML5 is to standardize how its features work across all major browsers, but this is not the case quite yet. I'm hoping that these bugs are corrected soon.
Sunday April 3. 2011
