¿Usar múltiples objetos de lienzo es una buena práctica?

Estamos desarrollando un juego de saltar y correr con HTML5 y JavaScript y tenemos que construir un marco de juego propio para esto. Aquí tenemos algunas dificultades y nos gustaría pedirle algunos consejos:

Tenemos un objeto "Stage", que representa la raíz de nuestro juego y es un envoltorio div global. El escenario puede contener múltiples "Escenas", que también son elementos div. Implementaríamos una escena para la tarea de reproducción, pausa, etc. y cambiaríamos entre ellas. Por lo tanto, cada escena puede contener múltiples "Capas", que representan un lienzo. Estas capas contienen "ObjectEntities", que representan imágenes u otras formas como rectángulos, etc. Cada Objectentity tiene sus propios Lienzos temporales, para poder dibujar imágenes para una entidad, mientras que otra contiene un rectángulo.

Establecemos una escena activa en nuestro escenario, por lo que cuando se juega el juego, solo se dibuja la escena activa. Llamando activeScene.draw(), llama a todas las subcapas para dibujar, que dibujan sus entidades (llamadas drawImage(entity.canvas)). ¿Pero es esta una buena práctica? ¿Tener múltiples lienzos para dibujar? Cada ciclo de juego, cada contexto de capa se borra y se vuelve a dibujar. Por ejemplo, solo tenemos una capa de fondo inmóvil ... ¿no sería más útil dibujar esto una vez y no borrarlo cada vez y volver a dibujarlo? ¿O deberíamos usar un lienzo global, por ejemplo, en el escenario y solo usar este lienzo para dibujar? Pero pensamos que esto sería demasiado caro ...

Esta página contiene una excelente lista de optimizaciones que se pueden realizar en el lienzo. En la sección titulada "Usar lienzos de varias capas para escenas complejas", describe por qué tener múltiples objetos de lienzo es realmente mejor en muchos casos porque no tiene que volver a dibujar objetos grandes y caros (imágenes de fondo) con tanta frecuencia como los más pequeños y rápidos ( proyectiles). Aquí hay un tutorial para comenzar. En pocas palabras, simplemente cree una serie de lienzos para las cosas que requieren un dibujo diferente y alinéelos con un posicionamiento absoluto:

position:absolute;
left:0px;
top:0px;

Cada objeto de lienzo se puede nombrar y estratificar usando el índice z:

<canvas id="layer1" style="z-index: 1;" />
<canvas id="layer2" style="z-index: 2;" />

Finalmente, dibuje a los diferentes contextos:

function draw1() {
    context1... // draw background
}

function draw2() {
    context2... // draw character
}

function draw3() {
    context3... // draw bullets
}

Contre Jour hace esto, de hecho. No conozco muchos detalles, pero puede encontrar más notas técnicas de ellos. Si juegas su juego, creo que cada una de las masas de tierra con las que interactúa tu personaje son lienzos.

Parece una buena idea separar las partes activas del juego en lienzos. Por ejemplo, si estaba haciendo un RTS, la barra de comandos podría tener sentido para ser un lienzo separado para volver a dibujar solo de vez en cuando.