Logo

dev-resources.site

for different kinds of informations.

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

Published at
2/8/2021
Categories
javascript
webcomponents
animation
Author
Joe Honton
Categories
3 categories in total
javascript
open
webcomponents
open
animation
open
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.

Featured ones: