Chrome fillText() Clipping Large Text

rezoner / playground

Playground.js is a framework for your javascript based games. It gives you out-of-box access to essentials like mouse, keyboard, sound and well designed architecture that you can expand to your needs.

MIT License

459 stars 50 forks source link

Chrome fillText() Clipping Large Text #33

Closed jackrugile closed 8 years ago

jackrugile commented 8 years ago

My specs:

Mac OS X El Capitan - 10.11.3
Chrome 48

When approaching larger text sizes, usually around 100px+, the text is getting clipped. I know there is some behind the scenes action going on to get more accurate bounding boxes for text alignment, and I think it might be happening due to that. This is not happening in Firefox 44.0.2.

Here is a demo link and screenshot below: http://codepen.io/jackrugile/pen/e72ce88783098194ea7a5c3de39a29e4

screen shot 2016-02-15 at 12 35 44 am

rezoner commented 8 years ago

Oh my, I thought noone will use such big fonts :D Your prediction is good - I am measuring real font size using pixel data - but I've set the test canvas height to 100 - so it doesn't detects font larger than that.

Now to get rid of antialiasing on Chrome (windows) - I render the font in an intermediate canvas then scale it down. I think I will disable that for fonts larger than 32px - nevertheless fixed height in measuring process needs a fix too.

Thanks for notice.

rezoner commented 8 years ago

Okay - theoretically fixed.

jackrugile commented 8 years ago

Confirmed fixed. Thanks!

Heh, been working on something full screen, so I'm needing the bigger sizes for a title screen :)