TESTCASE DEMO: http://goo.gl/eIqkB EXPECTED RESULTS The relative thickness of the black outline on either side of the text should be the same above and below the text regardless of the y coordinate. ACTUAL RESULTS (Tested with stable Chrome on Mac.) The stroke seems to be drawn at the fractional position, but the fill seems to be snapped to a pixel boundary. I don't mind the snapping, but it should happen for both stroke and fill if it happens for either. Otherwise, if you have some animated text with both a stroke and a fill, the text outline will appear to slide around independent of the fill.
Here's a better example: http://goo.gl/W7bkG The stroke and fill are always drawn at the same level, so while the text as a whole should shimmer up and down a bit, the inside fill should never appear to move up or down a different amount than the outline.
(In reply to comment #1) > Here's a better example: http://goo.gl/W7bkG > > The stroke and fill are always drawn at the same level, so while the text as a whole should shimmer up and down a bit, the inside fill should never appear to move up or down a different amount than the outline. I can just guess that it has to do with hinting. It needs further investigation. In SVG we have the text-rendering property which can be set to geometric precision[1]. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
There does seem to be some variation in line thickness around the edges of the letter. These also appear in Chrome and Firefox. c.clearRect(0,+0,+640,+480); c.save(); try { c.strokeStyle = 'black'; c.fillStyle = 'yellow'; c.lineWidth = 3; c.font = '50px monospace'; var f = (new Date() % 10) / 10; c.strokeText('TEST', 100, 100 + f); c.fillText('TEST', 100, 100 + f); } finally { c.restore(); }
<rdar://problem/97219189>