Come bufferizzare la grafica per una tela html5

Question

Sto lavorando a un gioco che sta iniziando a diventare graficamente intenso. Ci sono molti punti, archi e sfumature che devono essere disegnati. Il problema è che il disegno di tutti questi elementi grafici sta iniziando a rallentare. I gradienti radiali RGBA sembrano richiedere un tempo eccezionalmente lungo per disegnare quando disegnati sopra altri gradienti (ad esempio, per lo sfondo).

Se ci fosse un modo per bufferizzare la grafica, questo potrebbe farmi risparmiare molti calcoli su ogni frame. Secondo this il buffering grafico delle domande può essere realizzato creando una tela html5 nascosta nel documento html. Sfortunatamente questo non funzionerà perché devo essere in grado di bufferizzare un numero indefinito di grafica per il gioco.

C'è un modo per bufferizzare una grafica per una tela html5?

Answer 1

Da 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; 
};