Does multi-screen HTML5 affect performance?

Question

I use the following code to pre-render a series of images for use as animations:

var renderToCanvas = function (width, height, renderFunction) { var buffer = document.createElement('canvas'); buffer.width = width; buffer.height = height; renderFunction(buffer.getContext('2d')); return buffer; }; function prerender(){ frames = []; for(i=0; i<20; i++) { frames[i] = renderToCanvas(200, 60, function (seq) { var image = new Image(); image.onload = function(){ seq.drawImage(image,0, 0, 200,60); }; image.src = "animation/animation0" + i + ".png"; }); } } 

This makes 20 screensavers for each sequence. Then:

 context.drawImage(frames[count], 13, 80, 200, 60); 

Does pre-return provide productivity in this case? I can also run the animation as follows:

 var disc= new Image(); disc.onload = function(){ context.clearRect ( 7, 235 , 200, 60 ); context.drawImage(disc, 7, 235, 200, 60); }; disc.src = "animation/animation00" + count + ".png"; 

Here is a link to the (unfinished) application:

http://tadjaland.com/spinningDisk/Yokogawa%20Spinning%20Disc-v0.html

(may require updating in Yahoo and IE to enable sliders, a problem that I haven't figured out yet)

In addition, each time a window with a sample is pressed, another 20 new non-stationary canvases are created. It seems like this will cause problems.

My second question: if the preliminary rendering improves performance, would it be better to pre-display all the images on one splash screen, for example, on a sprite sheet, or does the number of canvases matter?