Text On Canvas Looks Rubbish In Ie...why?

i recently extended the lovely jquery 'flot' charts plugin a bit...goal is to draw what would usually be in the legend directly on the chart. it looks only a bit rubbish as IE seem

Solution 1:

The sad fact is that, as of now font discrepancies between all the browsers exist in Canvas. What looks one way in Firefox will look another way in IE. What looks one way in Chrome will look another way in Safari (even though they are both webkit based)

Change the font to a "safer" one and see what happens. For instance:

ctx.font = "72pt verdana"
ctx.fillText("lalalala", 0, 72);

Ought to render the same in both IE9 and FF4.

That isn't the last of it of course. If you are doing things like scaling and rotating your fonts you'll encounter even weirder problems. Try this in Opera or the non-dev version of Chrome: http://simonsarris.com/misc/scaleText.html

(screenshot of that problem)

So the solution is to simply find a font that ends up looking the same on the browsers you want to target (by trial and error, start with the web-safe font list), and try to never both scale and rotate the canvas before calling fillText. There may even be other transformations that cause odd effects in different browsers, so you should try your font on a simple case and see if it does truly look different.