Optimizing canvas

<canvas> es uno de los estándares más utilizados para la representación de gráficos 2D en la Web. Se utiliza ampliamente en los juegos y visualizaciones complejas. Sin embargo, as Web sites and apps push canvas to the limits, el rendimiento comienza a sufrir. This article aims to provide suggestions for optimizing your use of the canvas element, to ensure that your Web site or app performs well.

A continuación una lista de tips par mejorar el rendimiento:

  • Repintar primitives similares o objetos repetidos dentro y fuera de la pantalla canvas.
  • Batch canvas calls together (for example, draw a poly-line instead of multiple separate lines).
  • Avoid floating-point coordinates and use integers instead.
  • Avoid unnecessary canvas state changes.
  • Render screen differences only, not the whole new state.
  • Utilice varios lienzos en capas para escenas complejas.
  • Evite la propiedad shadowBlur siempre que sea posible.
  • Con las animaciones, use window.requestAnimationFrame().
  • Probar el rendimiento con JSPerf.