title: html5 canvas: maxWidth argument to fillText produces ugly results in Chrome
body: <p>The maxWidth argument to <a href="https://developer.mozilla.org/en-US/docs/Drawing_text_using_a_canvas#fillText%28%29" rel="nofollow noreferrer">fillText</a> can be used to restrict the maximum width the text renders into, however, in chrome I sometimes get very odd results. Here is a particularly bad example where I need to restrict the width of the text by just a couple pixels. Above is a call to fillText with no maxWidth specified. The bottom example has a maxWidth. There is too big a space between the "w" and "a". Are there any tricks or workarounds to get better results?</p>
  
  <p><img src="https://i.stack.imgur.com/pIBtK.png" alt="&quot;Iowa&quot; rendered in chrome and firefox"></p>
  
  <p>Here's the code used for the example:</p>
  
  <pre><code>var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  
  ctx.font="8pt Arial";
  ctx.fillText("Iowa", 10, 40);
  ctx.fillText("Iowa", 10, 56, 21);
  </code></pre>
  
  <p>(edit: simpler repro)
  To repro you can go <a href="http://jsfiddle.net/AS9rY/" rel="nofollow noreferrer">here</a> and look at the bottom right box.</p>
  
  <p><strong>Update:</strong> The original question stated that there was a problem in firefox as well. That was an error. The issue only seems to be present in chrome.</p>