CODEWITHSUNDEEP
htmlcanvascross-browserrender
adamgede
adamgede

Reputation: 2142

How do I make the HTML5 MeasureText() and FillText() consistent cross-browser

I have a problem with some text rendering with the HTML5 Canvas that you can see at http://jsfiddle.net/qcVAV/.

It seems that Firefox and Internet explorer measure the text and fill it consistently, but Chrome doesn't.

In the provided link, you'll see that Internet Explorer and Firefox appear the same, and the measureText call shows that the provided text measures to 1679. In Firefox there is extra precision. For Chrome, however, the text measures to 1651.

I tried adding in the css reset http://cssreset.com - as I thought that maybe the css could be throwing things off.

What else can I do (if anything) to get text to be rendered consistently?

Upvotes: 3

Views: 674

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63812

Sorry, you're out of luck here!

Text is not only measured differently on every browser, it scales and renders vastly differently, too! Try multiplying the font size by 4 and mutliplying the scale by 4, the results might surprise you. Kerning in some browsers will be off, and Opera looks awful when a scale is applied at all.

The only way to make measureText consistent is to pre-compute.

The only way to make fillText consistent is to use images instead of text. It's must faster, anyway.

Both of these are untenable if the text is extremely dynamic, but if you only ever write say, less than 100 different pieces of text in your app, images are probably your best bet.

Upvotes: 2

Related Questions