Question

I’m working on a game which is beginning to get pretty graphically intensive. There are lots of points, arcs, and gradients that need to be drawn. Problem is that drawing all these graphics is beginning to get slow. RGBA radial gradients seem to take an exceptionally long time to draw when drawn over top of other gradients (ie, for the background).

If there was some way to buffer the graphics, that could save me a lot computations every frame. According to this question graphics buffering can be accomplished by creating a hidden html5 canvas on the html document. Unfortunately this will not work because I need to be able to buffer an undefined number of graphics for the game.

Is there any way to buffer a 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;
};