title: Drawing text gotchas in Chrome
body: <p>It has three canvases A, B and C.</p>
  
  <p><code>A</code> is the control canvas. In <code>B</code> you will notice that scaling translates <code>B</code> in <code>x</code> and <code>y</code> direction, but in Firefox scaling translates only in <code>x</code> direction. Which implementation is correct?</p>
  
  <p>Also notice the rotated <code>C</code>. In Chrome it looks totally ugly, but in Firefox this looks fine. How do I fix this?</p>
  
  <p>I have latest Chrome and Firefox 5.</p>
  
  <p><strong>The code</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $('canvas').each(function(i) {
      var c = $(this);
      c.attr('height', '200px');
      c.attr('width', '200px');
      c.css('border', '1px solid black');
      var ctx = c.get(0).getContext('2d');
      switch (i) {
        case 0:
          ctx.translate(100, 100);
          ctx.fillText('A', 0, 0);
          break;
        case 1:
          ctx.translate(100, 100);
          ctx.scale(16, 16);
          ctx.fillText('B', 0, 0);
          ctx.scale(1 / 16, 1 / 16);
          ctx.fillText('o', 0, 0);
          break;
        case 2:
          ctx.translate(100, 100);
          ctx.scale(16, 16);
          ctx.rotate(1);
          ctx.fillText('C', 0, 0);
          ctx.rotate(-1);
          ctx.scale(1 / 16, 1 / 16);
          ctx.fillText('o', 0, 0);
          break;
  
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;canvas&gt;&lt;/canvas&gt;
  &lt;canvas&gt;&lt;/canvas&gt;
  &lt;canvas&gt;&lt;/canvas&gt;
  &lt;canvas&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>A working example can be found <a href="http://jsfiddle.net/vnvJM/1/" rel="nofollow noreferrer">here</a></p>