title: Fractional font sizes html5 canvas?
body: <p>I am having an issue with how different browsers render fonts sizes on the HTML5 Canvas. Specificaly where the font sizes are not whole numbers. For example "8.5px Arial", "2.23em Arial" and so on. </p>
  
  <p>For canvas.font= FontSize + "px Arial"; where FontSize is (8.1, 8.2, 8.3, ...)  I would expect a linear result, however the only browser that consistently archives this is IE ! ( I know ). Firefox rounds below 11.2px but is linear beyond that. Chrome and Safari only scale fonts to integer values. </p>
  
  <p>The rounding rule seems to be set to pixels and rounds down to the nearest integer below .5</p>
  
  <p>My canvas app is performing some programmatic animated transforms ( scale and translate ) Trying to avoid canvas transforms for the sake of efficiency, although I suspect it would solve the problem, I have also not tested this by setting html text size with just CSS3  ( that the Canvas.font is suppose to be based on according to the spec)</p>
  
  <p>The browsers are at least consistent in behavior between pt, px, em, and % font sizes. [edit: except Safari does not render % sizes]</p>
  
  <p>[ an aside : all fonts look a little bold once blown up a bit. Safari takes that cake as we go from 17.4px to 17.5px .. BAMB!]</p>
  
  <p>I have attached some example images below but would really like some ideas on how to make all browsers more like IE ( again never thought I would say that ) - Is this a bug or a standard for rendering fonts?</p>
  
  <p>here is my test code that can be replicated for the PX font size case. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;script&gt;
  function display() {
      var canvas = document.getElementById('test');
      // For EM and % cases....
      //canvas.style.font="5px Arial";
      canvas.height = 1000;
      var context = canvas.getContext('2d');
      var minSize = 10;
      var lineHeight = 100;
      for(var a=minSize; a&lt; 20; a+=0.1)
      {
          var font_size =  Math.round(a*10000)/10000;
          context.font = a + "px Arial";
          context.fillText("A: EXAMPLE TEXT &gt; " +  font_size, 20, (font_size-minSize)*lineHeight);
      }
  }
  &lt;/script&gt;&lt;/head&gt;&lt;body onload="display()"&gt;&lt;canvas id="test"&gt;&lt;/canvas&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>Pixel scale
  <img src="https://i.stack.imgur.com/1YddV.gif" alt="pixel scale">
  Point scale
  <img src="https://i.stack.imgur.com/g2aAV.gif" alt="point scale">
  em scale - 1em = 5px Arial
  <img src="https://i.stack.imgur.com/n0QOo.gif" alt="em scale">
  percent scale - 100% = 5px Arial
  <img src="https://i.stack.imgur.com/Vdklx.gif" alt="percent scale"></p>