Font rendering in canvas seems to show up thicker on the first frame, and thinner on the next frames. I haven’t been able to pinpoint why yet.
This is notebook to reproduce:
You might tell what browser/browser version/OS you are using. On Mac Firefox v57 I don’t see this issue, and on Mac Safari v11 the yield results in a syntax error.
Probably a Chrome bug.
Interesting bug. I suspect it has something to do with Chrome’s subpixel text rendering. The issue with the first frame seems to go away if you set ctx.font only once, rather than setting it on each frame. I have no idea why, though. Sorry!
Dug deeper—turns out the canvas has to be mounted before we set our font. ¯\_(ツ)_/¯
- This is an issue with Chrome (on mac, at least)
- Setting the font before mounting the canvas results in a blurry font.
- this explains why only setting the font once made the frames consistent but blurry.
(updated the example linked in first post to reflect the solution)
Huh! Want to file a Chromium bug for that (if there isn’t one already)?
i tried reproducing this outside of Observable to report to chromium—didn’t work, so I’m not sure I understand the root of the issue anymore: