Bug 73173 - fillText() and strokeText() handle fractional pixel values differently
Summary: fillText() and strokeText() handle fractional pixel values differently
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac Unspecified
: P2 Normal
Assignee: Nobody
URL: http://goo.gl/W7bkG
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2011-11-27 12:25 PST by Ian 'Hixie' Hickson
Modified: 2022-07-18 14:11 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Ian 'Hixie' Hickson 2011-11-27 12:25:51 PST
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.
Comment 1 Ian 'Hixie' Hickson 2011-11-27 12:29:08 PST
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.
Comment 2 Dirk Schulze 2014-04-05 13:14:06 PDT
(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
Comment 3 Brent Fulgham 2022-07-18 14:10:56 PDT
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();
}
Comment 4 Radar WebKit Bug Importer 2022-07-18 14:11:11 PDT
<rdar://problem/97219189>