Canvas vs CSS Transformations

Question

I was wondering if I should implement CSS3 transformations or canvas transformations in my HTML5 canvas games (rotate, skew, scale... mainly on 2D for now).
I am intending to use it for chrome on android.
I couldn't find any definitive answer.
What are the performance gains and overall pros and cons of each?

Answer 1

It depends on purpose.

If you use CSS3 transformations it will only affect the canvas element and not its content (bitmap), while using canvas' own transformation do affect the content.

Another difference is that CSS3 transformations affect canvas and its current bitmap over-all, there is no differentiation. Using local transformation of the canvas' context allow you to change the transformation matrix between each draw to affect different shapes different ways.

If you don't need separate transformations for different shapes in the canvas and you don't need to extract pixels for analyzing/manipulating transformed content then CSS3 could be the better choice.

I believe the browsers share the same transformation process (at core) so performance per-se is no different (in theory). There is still a performance hit using canvas' local transformation but due to JavaScript itself, while CSS3 transformations are invoked internally in native compiled code.

Canvas can give you better and simpler detail control compared to setting up CSS rules for each transformation you want.

A disadvantage using canvas' transformation is when reading for example mouse positions which are relative to the element and not the transformed bitmap. This means you would need to use an inverse matrix to compensate for this. You can get around this by using absolute transforms instead of accumulative ones which you set and reset for each frame update.

My recommendation: For game use canvas is typically better. You can make simpler game using CSS only but I would recommend canvas for these things.

(disclaimer: I assume in my answer you are meaning content of a canvas and not in general).