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.
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.
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.
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.
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.
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.