Animation in canvas with JS using multiple sprites?

Question

JavaScript

Everywhere there are examples with one picture, where it is divided into parts and frames are pulled out one after another.
I need to make animation from several pictures.
Here is an example.
How best to implement on canvas? Not by assigning each image to a variable and its further rendering, but by looping through the array of paths to each image
PS Without using third-party libraries

Answer 1

Well, the only difference between the sprite method and the image method is that instead of moving the coordinates of the sprite in the drawImage function, you must change the passed Image object, previously loaded into the array.

Answer 2

It's easier and better to combine pictures into one. This will be called a sprite.
This is a common practice, except that there will be no possible lags with loading a bunch of pictures instead of one with all frames at once.
And then any animation guide will help you.

Answer 3

Here you load your 17 pictures into 17 objects and draw one by one.

Answer 4

www.williammalone.com/articles/create-html5-canvas...