Aquí en realidad estoy hablando de una cuestión de rendimiento.

Ya investigué un poco sobre la creación de capas en proyectos de lienzo html, y encontré en la mayoría de los tutoriales, simplemente me dijeron que escribiera muchas etiquetas estáticas de lienzo html, luego obtuviera contexto de cada uno de ellos (luego use css / absolución posición /z-index para simular el orden de las capas).

Pero me pregunto si ESTA MANERA es mejor:

1. escriba solo UNA etiqueta de lienzo (y llamémoslo background canvas ) en html.
2. cree otro elemento de lienzo usando la API createElement para cada capa, pero sin agregarlos al DOM.
3. obtener contexto de estos lienzos "virtuales" (que se crean dinámicamente)
4. use canvas api para dibujar cosas en estos lienzos "virtuales".
5. use requestAnimationFrame y drawImage para dibujar cada lienzo "virtual" en el lienzo de background canvas

En realidad, pensé que el lienzo creado dinámicamente es más aceptable/flexible para mí, pero no tengo mucha experiencia en la optimización del rendimiento del lienzo (y es por eso que estoy aquí).

Creo que necesito alguna guía sobre cómo probar el rendimiento de estos dos casos.

Si alguien aquí tiene alguna sugerencia será apreciada.