Making Firefox render canvas text the same as CSS text
- by Dan Forys
I've been experimenting with the canvas tag and Javascript. I've made a page that takes Tweets from the Twitter public timeline and animates them into view. It works by using a canvas element in the background for the animation. When the animation is complete, it creates a div element with the same text over the top. I do this so that the tweet text is selectable and links are clickable.
Now, in Safari, Chrome and even Opera, the canvas text and div text look almost exactly the same. Yet in Firefox, the size of the text is different enough to make it 'jump' at the point it changes into the div.
Does anyone know how to make Firefox render the text the same on the canvas element and the div using CSS? Or is this a rendering inconsistency with the engine.
I have put the page on my website if you want to see what I mean.
Now for the code:
The CSS I'm using for rendering the div contains:
line-height: 21px; font-weight: 100; font-family: Georgia, "New Century Schoolbook", "Nimbus Roman No9 L", serif; font-size: 20px;
For rendering on the canvas I'm using:
this.context.font = this.scale + 'px Georgia';
this.context.fillStyle = "white";
this.context.strokeStyle = 'white';
this.context.fillText(this.text, 0, 0);
this.context.strokeText(this.text, 0, 0);
where this.scale is an animated scale factor that finishes at 20px exactly. So, to recap, I'm using the same font and ending up at the same px size, yet Firefox renders the text differently between Canvas and CSS.
(edit) Here's a screenshot example:
First line is the text animating in using canvas, second line is the resulting div.
