Stig Runar Vangen homepage
Blog

Blog

Updated Jigsaw Puzzle

After testing the Jigsaw puzzle game on a few computers, I found that it performed badly on some systems. During development I've only used my powerhorse of a computer, and never thought it would run badly on older computers, as it ran relly well on my computer. Back to the drawing board, and I did a small redesigned on how the puzzle is rendered. This resulted in an unheard of speed increase for the rendering. The end result is that the game now runs as smooth as I wanted it to on older systems as well.
Thursday April 14. 2011

Jigsaw Puzzle

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.
Warning (2): Illegal string offset 'lang' [APP/View/Helper/AppHelper.php, line 37]
Sunday April 3. 2011