How to smoothly animate scaling of HTML5 canvas fillText() How to smoothly animate scaling of HTML5 canvas fillText() google-chrome google-chrome

How to smoothly animate scaling of HTML5 canvas fillText()


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_historyOther than the canvas, I can't say for sure, but I know CSS 3D hardware acceleration exists.


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.