Is it more beneficial to use a canvas element as a buffer for the image or is it more beneficial to use an img element as a buffer?

I want to do a ton of animation with images on canvas; is it more beneficial to use a canvas element as a buffer for the image (so that we do not have to resize again) or is it more beneficial to use an img element as a buffer?

Or is there actually a better way, a must-do if performance is top-priority that I should do and I'm missing?

Also, why is "clearing" the canvas such a slow operation? My background is xna programming for windows phone 7 and "clearing" the whole screen is one开发者_StackOverflow中文版 of the fastest operation.

Also, should I "clear" the canvas by setting width=width or should I do a drawRect(0,0,width,height) ?

You should use canvas elements as buffers for transformed images and align your drawImage calls on integer coords. Software canvas implementations get slow once you need to transform the image (because transforming = resampling = slow.)

See: http://jsperf.com/canvas-drawimage

Clearing the canvas, use clearRect: http://jsperf.com/canvas-clear-speed