CSS3 versus canvas for text rotation

Question

I have an idea in my simple simple technical demo. It will have a good amount, maybe up to 100, various text labels with different turns and Z-orders. In addition, there will be constant animation, so the size, rotation and position of the labels will be changed.

This can be done using CSS3 or Canvas, as far as I can tell. The CSS3 approach should be more accessible, but are there any other real differences?

Edit: I also need to be able to place labels exactly with their center point.

Answer 1

Or it should be good. I will start by creating CSS3 and then make Canvas only if something is unsatisfied. Some considerations:

• Today, the text in the DOM looks much better than the text on the canvas for many browsers. Some browsers do not perform sub-pixel rendering on Canvas text (while others do), doing something written in the same font in the DOM and the canvas look completely different. For visual consistency, CSS3 is better now.
• Ask yourself what you can do about it later, if anything. Turn it on interactively? Increase the number of objects above 10,000? Then you want to make Canvas, in short, because 10,000 DOM objects are a "bad thing".
• I'm not sure which one will be faster with just 100 text labels. You can easily write a quick test on your target platforms to see.
• Perhaps CSS will be much faster to do.
• Canvas gradients do not work on all mobile devices that I last checked.
• Canvas text rotation + scaling is used to view AWFUL in Chrome and Opera. Chrome fixed it from version 12, Opera still looks awful. You can check the target browsers here: http://simonsarris.com/misc/scaleText.html The Opera view looks like this .

Answer 2

while css3 would be a better solution, you should at least consider svg.
see live example: http://jsfiddle.net/gion_13/DhqEN/show/
postscript: a big minus for the canvas, because it has no choice of text