Cross Browser Canvas Bugs and Compatibility

If you've been working on websites in the last.. hmmm... well if you've ever worked on websites, you'll be familiar with the problem of different browsers behaving differently. If it's CSS, JavaScript or even just ordinary HTML you'll find that each browser has it's own way of understanding what you want it to do.
HTML5 is well underway now, and things are looking up. It's all good, right?

Well, not. Not exactly.

Yes, things are in a much better state. Not just that, but we've also figured out ways to bend the browsers to our will - if() statements to check what JavaScript to use, browser specific <!--[if IE]> tags to fix up the CSS.
We've managed to get by okay. And now with HTML5, we've even got a bunch of new toys to play with. We can embed video without third party plugins, we can render vector graphics natively, and all kinds of awesome things.

There is one small problem though. At this early stage of HTML5 implementations, we're seeing the familiar problem of cross-browser compatibility.
I've recently posted about my use of the canvas element. One thing I had planned to post about there was some of the canvas bugs I've encountered over the last couple of weeks.
That post was getting rather lengthy, so I rewrote it, and have begun writing this one.

My testing involved FireFox (3.5.13), Opera (10.62), and Chrome (7.0)- I didn't test in IE9 since I don't have it right now. I may revisit the topic when I do get a copy of IE9 installed.

Anyway, onto the details.

I've picked up a few minor quirks and bugs while using the canvas to render graphics for use in a little website I've been toying with.
Most of the problems can be resolved with a bit of extra JavaScript. Rather than making recommendations for how you can solve the problems, I've just implemented some simple fixes that work in my specific test case. You can, and should, do better if you want to go to production with the canvas on your site.

Let's take a look at the processes I'm using in the test case, then I'll follow up with images of the results for each browser.

1. Testing:
   • Add new rounded rectangle methods to the canvas 2D context
   • Render a filled rounded rect in default fillStyle
   • Render a stroked rounded rect in default strokeStyle
   • Render a filled text in new fillstyle "rgb(255,0,0)"
2. Testing:
   • Render a filled rect using fillStyle 'rgb(255,0,0)' WITH shadow a drop shadow
3. Testing:
   • Render a filled rect using a linear gradient WITH shadow a drop shadow
4. Testing:
   • Render a filled rect using a fillStyle 'rgb(0,0,0,0)' WITH shadow a drop shadow
   • Render a filled rect using a linear gradient

So, how did the browsers do?
Note: I've edited these images to place the browser logo in the center. I haven't doctored the results, though.

FireFox:

• The stroked rectangle should be rendered black - it is rendered red

Opera:

• None that I noticed (well done, Opera)

Chrome:

• Alpha doesn't reset to 1.0 when fillStyle is set to 'rgb(0,0,0)' - you must specify 'rgba(0,0,0,1)'
• shadowColor is ignored when fillStyle is a gradient - renders using gradient from fillStyle

This test is not intended to validate compliance with and standards, it just highlights some inconsitancies between some current browsers.

If you'd like to see how your browser would do with this simple test, I've uploaded it here (there are a few more details there). Please go take a look, feel free to post your results in the comments.

If you would like to recommend some further tests to add, please let me know.