Bug 73173 – fillText() and strokeText() handle fractional pixel values differently

• Status: NEW
• Component: Canvas

[Ian 'Hixie' Hickson]

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.

[Ian 'Hixie' Hickson]

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.

[Dirk Schulze]

(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

[Brent Fulgham]

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();
}

[Radar WebKit Bug Importer]

<rdar://problem/97219189>