HTML5 Canvas TextBaseline Top looks different in Firefox and chrome

Question

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?

Answer 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.