How to buffer graphics for html5 canvas

Question

I am working on a game that is starting to get pretty graphically intense. There are many points, arcs, and gradients to draw. The problem is that drawing all these graphics starts to slow down. RGBA radial gradients seem to take an exceptionally long time when drawn on top of other gradients (i.e. for the background).

If there was some way to buffer graphics, it could save me a lot of computation in each frame. In accordance with this, the question of graphics buffering can be performed by creating a hidden html5 canvas in an html document. Unfortunately, this will not work, because I need to be able to buffer an undefined number of graphic elements for the game.

Is there a way to buffer graphics for an html5 canvas?

Answer 1

From http://kaioa.com/node/103

var renderToCanvas = function (width, height, renderFunction) {
    var buffer = document.createElement('canvas');
    buffer.width = width;
    buffer.height = height;
    renderFunction(buffer.getContext('2d'));
    return buffer;
};