HTML:Canvas:Animation

lastmod 2026-11-10created 2023-02-222 edits

Animation on an HTML Canvas is implemented as a loop that clears the canvas every frame, updates the state, and draws again. The standard approach is to call the drawing function with requestAnimationFrame in step with the browser's screen refresh cycle, and objects are moved by combining save/restore with transformations (translate, rotate). This page collects the basic MDN tutorial.

See also

• Canvas element

Favorite site

• Basic animations - Web APIs | MDN