Programming

Reversi Revisited (HTML5 canvas on Chome, FireFox, IE9, iOS Safari)

Back in September I posted a HTML5 Reversi game taking advantage of the element.  At the time, I only targeted Chrome so I thought I would follow back up and add Firefox 4 and Internet Explorer 9 support.  In just a couple of hours work, I have a fully functioning Firefox version of the game and a mostly complete version for IE9.  Click here to play the game or here to view a screenshot of the three browsers in action.  Below is a description of the problems I encountered and how they were resolved.

Firefox Support

Problem: The Firefox mouse event object does not support the clientX or clientY properties.  ClientX and clientY are fantastic because they give you the position relative to the element.
Solution: Most sites recommend using (event.pageX – elem.offsetLeft) but this gives inaccurate values when the HTML element has auto-margins.  The solution to this problem was to relatively position the canvas element.  Relative positioning doesn’t affect the rendering of the element at all, preserving its position in the document and its flow, but it does reset the coordinate system for event.layerX and event.layerY.  Simply adding this simple CSS allows the code to work for both Firefox and Chrome.

Problem: Firefox failed to render the game pieces.  The gameboard itself was rendered correctly.
Solution: After a bit of debugging, I found that FireFox was rendering correctly until it received a command equivalent to ctx.scale(1,0) when the pieces flip.  This command, while not raising a JavaScript error, effectively crashed the canvas, causing it to not accept any future commands.  Simply wrapping that block of code with an -if- statement got things rendering. The issue was filed with a testcase as bug 661452.

Problem:  Rendered text wasn’t updating.
Solution: FireFox doesn’t support innerText, switched to innerHTML as no markup was included.

Problem: Some gradient backgrounds weren’t rendered.
Solution: Added Mozilla gradient CSS.

IE9 Support

Problem: Values for event.layerX and event.layerY were way off.
Solution: Since Chrome and IE support event.clientX and event.clientY, I ended up using the following code for all three browsers:

 var x = event.offsetX == undefined ? event.layerX : event.offsetX;
 var y = event.offsetY == undefined ? event.layerY : event.offsetY;

Problem: Internet Explorer does not support gradient backgrounds.
Solution: While Internet Explorer doesn’t support gradients, it does support SVG backgrounds.  Creating a SVG file with a gradient and a width and height set to 100% has it fill the box.  Best of all, this solution works with Chrome, IE9 and FF4, meaning we don’t need to use browser specific CSS.

Unsolved Problem: IE9 does not yet support text shadows.  While there are some hacks out there for basic shadows, the iOS style elements use inlaid shadows and there’s no obvious solution.  Fortunately this is a small cosmetic issue.

Unsolved Problem:  IE9 does not yet support web workers.  I could move the AI logic into the main thread for IE, but this would make the browser unresponsive.  In the mean time, a JavaScript exception will raise (not user visible) when you select an AI level but clicking back 0n Human will let you resume single player mode.

iOS Safari Support

Interested in how it would do, I opened the original version in the my wife’s iPad.  The game worked flawlessly, even with the AI.  Of course, the iPad has the same browser engine as Chrome.  There are a couple things I noticed that could stand some improvement:

  • Since your fingers don’t really simulate a mousemove event, there is no move previewing.  For this kind of device a two click approach would simulate nicely, with the first click simulating the mouse entering a square and the second confirming the move.
  • Clicking on the canvas highlights it briefly.  I haven’t really looked into why but it would be nice to eliminate that graphical problem.
  • Testing on a friend’s phone, I noticed that the AI didn’t work, which suggests that the iPhone 4 doesn’t support web workers.  It’s interesting to see two different iDevices released so close together have different feature support.  One correction would be to check for the Worker object before showing the AI selector.
  • Testing on the iPhone, I also saw that the game existed in a one inch square on account of the retina display.  The game would benefit from mobile device and resolution detection.

Conclusion

If you didn’t notice, not a single change above was related to the canvas’s rendering.  There was just one related to the context crashing.  The canvas did phenomenally in all three browsers, behaving identically and rendering the exact same results.  Admittedly this isn’t the most complex example, but it does include mouse event driven animation that can respond pretty rapidly.  Given how well the canvas is supported across the different browsers, I would consider using it for more complex applications.

As far as the other aspects of HTML5 go, I was a little sad to see text shadows and web workers not supported in IE9 but was delighted to see the SVG background in action.  Since SVG backgrounds have cross-browser support, I would recommend using them in place of browser specific background gradient CSS.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s