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.