Bug 56925 - Canvas text measurements wrong
Summary: Canvas text measurements wrong
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows XP
: P2 Normal
Assignee: Myles C. Maxfield
URL: http://jsfiddle.net/k44x3/1/
Depends on:
Reported: 2011-03-23 08:29 PDT by sean hanna
Modified: 2014-04-05 13:59 PDT (History)
3 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description sean hanna 2011-03-23 08:29:11 PDT
I've created a good test case for this issue at jsfiddle url.


Using a dom / javascript based text measurement approach, safari yields the actual width of the text.

Using canvas based approach the text measurement jumps around and becomes wildly inaccurate as text length increases.

Tested in nightly snapshot WebKit-SVN-r80840

Oddly, versions of chrome from the oldest version 1.0 to latest 10.0 handle these measurements fine, and I thought chrome integrated webkit so don't ask me how that happened. MOST versions of chrome i tested on were reporting webkit version 534 instead of the 533 that is reported for safari (by jquery browser detection.

This test case generates accurate measurements in firefox and opera versions i've tested too.
Comment 1 Dirk Schulze 2014-04-03 02:28:41 PDT
I get 
Need at least three spaces
Canvas calculated length of 172
JQuery width() calculated length of 174

Seems close. Firefox returns 173.56666564941406. Blink return 172 for both, query and canvas. Is this still valid?
Comment 2 Dirk Schulze 2014-04-05 13:59:25 PDT
Please reopen if I am mistaken.