How to smoothly animate scaling of HTML5 canvas fillText()

Question

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.

Answer 1

It seems like your answer is yes: http://trac.webkit.org/wiki/LayoutUnit

However, when I play with text resizing really slow, I notice that the text grows along the X, then the Y, then the X, then the Y, creating that choppiness, so maybe there is some other issue at play...

Try using requestAnimationFrame with the cross-browser shim instead of a timeout: http://creativejs.com/resources/requestanimationframe/

I created this to play with: http://codepen.io/anon/pen/iCABx

Hopefully that helps in some way.

Does chrome support GPU based text rendering?

In this case, the text is a drawing on the canvas. Canvas2D hardware accelerated rendering was added in Chrome 18: http://en.wikipedia.org/wiki/Google_Chrome#Release_history Other than the canvas, I can't say for sure, but I know CSS 3D hardware acceleration exists.

Answer 2

If your text is just a single message a reasonable solution could be to just create a big text in a separate hidden canvas object and then drawing this as an image with the scaling you need.

Note also that scaling a text by changing the font size is quite different from just applying a transformation on it. In other words in general the shape of an 8pt font is not just the same of a 16pt font with everything scaled down 50%... the reason is for example that for readability and aesthetics you want the three legs of a small "m" character to by on exact pixel boundaries and equally sized and spaced... clearly this is not possible by simply shrinking the coordinates and the difference (especially on small fonts) can be huge.

If an animation of a text with smooth slow zoomming doesn't "wobble" then it simply means that the rendering (as text) is poor quality. But probably in that case what you want is a zooming on the image of a text... and that's what's the hidden canvas is.