What is the effective granularity of font size in html5 canvas text?

Question

I've searched exhaustively for an answer, and I'm hoping that stackoverflow will come to the rescue once again.

If we set the font size of a context, it seems to allow arbitrary precision:

fontSize = 11.654321;
context.font = 'bold ' + fontSize + 'px sans-serif ';

Inspecting the context object will show that font size has been set with extreme precision. I have noticed, however, that the measureText() method of the context object always returns an integer value (presumably a ceiling value). Does anyone know the actual precision used in displaying text (when using pixel-based font sizes)?

A link to documentation containing this information would be sufficient (as long as it actually informs about precision).

In case anyone asks, I'm trying to adjust the font to fit text to a given width by doing something like this:

var fontSize = 12;
context.font = 'bold ' + fontSize + 'px sans-serif ';

var text = "whatever";
var maxWidth = 200;

var currentWidth = context.measureText(text).width;
var adjustment = maxWidth / currentWidth;
fontSize *= adjustment;
context.font = 'bold ' + fontSize " 'px sans-serif ';

Answer 1

For Chromium and Firefox, it appears that the effective precision is at the integer level (I have not tested Internet Explorer). I've created this jsFiddle to research the issue, and it appears from my research that in Chromium and Firefox, font sizes specified with sub-integer precision are effectively rounded to the nearest integer.

The tests I've done assume that the measureText() method is functioning correctly (which may be a false assumption). The tests have shown some odd behavior for this method (more obvious in Chromium than in Firefox).

Using a fixed length string of a repeated character ('m'), I have graphed the measured size of the string as a function of its font size. When using 0.1 for the font size input step size, the output string width remains constant for step sizes of 1.0. These "steps" are centered around the integer font size, and jumps occur at midpoints between integers.

The odd behavior observed in Chromium is that at times, the input font size can be varied as much as 2 pixels, with no change in the measured width of the string. This behavior is unexpected, but occurs at regular intervals (offset from zero). The following intervals of input values resulted in no change in measured width: [3.5, 5.5), [12.5, 14.5), [21.5, 23.5), [30.5, 32.5), and so on. The centers of these "big flat steps" seem to be 9 pixels apart (4.5, 13.5, 22.5, 31.5). The first one having a center around half the spacing of the interval between the rest maybe a clue if this is indeed a bug.

In Firefox, the odd behavior is much more subtle. If you change the input step size to 1, the graph is nearly linear (as expected).. but periodically the graph gets slightly steeper for an interval of 1. For example, this occurs at [11.5, 12.5) and [35.5, 36.5).

If I am overlooking something, or if there is some error in my methods, please comment and let me know. I am not too concerned about the Firefox behavior, but as of now, I consider the behavior in Chromium to be a bug. I may file a bug report, and if so, I will update my answer to include a link.