HTML5 Canvas TextBaseline Top looks different in F

问题:

In canvas, while setting textBaseline property to 'top', its rendering differently in chrome and firefox. In chrome, there is a gap between line and the text where as there is no gap in firefox.

Kindly refer this to view in your browser, any help would be thankful.

I also checked similar issue reported long-back. Is there any work-around in firefox to get it work fine?

回答1:

I agree with the OP that this is an issue and it's peculiar to Firefox. Increasingly though, it seems that Firefox has adjusted the vertical offset overtime. It was once once about 4 pixels, then 3. Now, it is almost imperceptible. So, I agree with @Kaiido above. Use/set *object*.textBaseline="alphabetic"; I believe that this is consistent across browsers.