Drawing text gotchas in Chrome

It has three canvases A, B and C.

A is the control canvas. In B you will notice that scaling translates B in x and y direction, but in Firefox scaling translates only in x direction. Which implementation is correct?

Also notice the rotated C. In Chrome it looks totally ugly, but in Firefox this looks fine. How do I fix this?

I have latest Chrome and Firefox 5.

The 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;

    }
  });
});

<script src="开发者_运维问答https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>

A working example can be found here

The reason why it looks wierd in chrome is because you use context.scale instead of context.font. When drawing text in canvas i suggest you use the context.font to increase the font size instead of context.scale(). When using scale it draws the text with the standard font-family/font-size (if no other font have been specified) which can result in a non-smooth character. For more information about font see 2d-context spec. http://www.w3.org/TR/2dcontext/#dom-context-2d-font

For me the rotation and scaling looks the same in chrome, firefox (though I havent istalled 5.0 yet) and opera (Except the uglyness that comes from scaling). Looking at the code I quite sure it acts correctly.

EDIT: Installed FF5 now and it scale and translate looks correct

This is from a set of text bugs I found back in March. It has already been reported:

http://code.google.com/p/chromium/issues/detail?id=76061&can=1&q=simonsarris&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS

It is fixed in newer versions of Chrome, specifically anything past 13.0.782.10 m.