Which is faster for rendering image manipulations: HTML5 canvas element, or manipulating DOM elements' CSS with JS/jQuery?

Question

If I have multiple (up to a dozen perhaps) images for which I want to do things like change position, resize, fade in and out, and rotate, I figure my options are Flash (which I don't really want to use), <canvas> , or lots of <img> tags and jQuery.

I'm sure it depends on a lot of factors - the browser and its layout engine, for one - but I'm wondering if it's possible to generalize that one of these methods is likely to be faster than the other.

I'm not so interested in browser compatibility - this is for an art project - so speed is really what I'm concerned about, because I have seen jQuery animations get choppy before and I want to avoid that.

Answer 1

If you can require a modern browser, then for best performance use CSS3 transitions .

These will offload to the GPU where possible, and will let the browser handle fades, rotations, etc, all completely autonomously.

Use jQuery if you need to just to trigger actions.

Answer 2

As you said, it depends on the browser. The js/jQuery way will work for every browser except for rotations. HTML5 Canvas won't work on old browsers for example IE 6, 7, 8 (see http://caniuse.com/#feat=canvas ). Flash won't probably work on most mobiles and it will need to be downloaded.