How to smoothly animate scaling of HTML5 canvas fillText()

Running the script below in IE9 produces a buttery smooth animation. But the same script when run in Chrome20 (win & mac) produces a wobbly animation. How can i fix this?

Also I would appreciate if someone could provide a definite answer to the following related questions as well.

Does chrome support sub-pixel text rendering?

Does chrome support GPU based text rendering?

If so then please mention the exact version and OS the feature was added in.

http://jsbin.com/ijegam/2

<canvas id="myCanvas" width="1000" height="500" style="border:1px solid #d3d3d3;">
</canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var i=12;
function f() {
    ctx.clearRect(0,0,1000,500);
    ctx.font=i + "px Arial";
    ctx.fillText("Hello World",10,350);
    i+=0.1;
}
setInterval("f()", 16);
</script>

In IE9 initially the animation is also a bit wobbly but after a few iterations it becomes extremely smooth.