Animation in canvas in JS using multiple sprites?

Everywhere examples with one picture, where it is divided into parts and get each other shots.
I need to make animation from several images.
Here is an example
How best to implement on canvas? Without assigning each image to a variable and its further drawing, and a loop walking through the array of paths to each picture
P. S Without the use of third-party libraries
March 19th 20 at 08:40
5 answers
March 19th 20 at 08:42
Solution
Well, the difference of the way with sprite from the way picture only that instead of moving the coordinates of the sprite in function drawImage, you have to change the transmitted Image object previously loaded into the array.
March 19th 20 at 08:44
Solution
the initial code I steal away, that is, the idea he does is not what we need (or rather, not onlythat it is necessary)
https://developer.mozilla.org/en-US/docs/Web/API/C...

add URLs to images in an array, timer change image.src at drawing pictures
https://codepen.io/anon/pen/vPMVGr
March 19th 20 at 08:46
Easier and better to combine pictures into one. It will be called a sprite.

It is common practice, in addition that will not be possible lags with loading heaps of images instead of one with all the frames at once.

And then any guides on animation will help you.
March 19th 20 at 08:48
Here download your 17 pictures 17 sites and draw in turn.
March 19th 20 at 08:50

Find more questions by tags AnimationCanvasJavaScript