DEV Community

Cover image for High Performance HTML Rendering: How to properly use a game loop with HTML canvas drawings
Joe Honton
Joe Honton

Posted on

High Performance HTML Rendering: How to properly use a game loop with HTML canvas drawings

Game programming uses a software pattern called a game loop. It’s an important technique for any software developer to study, having applicability to serious endeavors beyond graphic animations, for example in: time-series charting, interactive data visualization, and scientific modeling.

This article shows how to improve the continuous requestAnimationFrame callback to handle:

  • real-time fidelity,
  • throttling things to a fixed rate,
  • placing canvas drawing functions behind promises,
  • completely skipping unnecessary drawing.

Discussion (0)