How to change rendering of images to ready-made images in canvas?

Question

JavaScript

I found an interesting animation on the Internet, where the filled circles randomly move and collide with each other and with the walls.
I have never worked with canvas technology before.
Idea: change the drawing of the figures to the finished images and so that they move in the same way.
Animation here codepen.io
Thanks in advance.

Answer 1

codepen.io/anon/pen/yaokzo?editors=1010 - done, what has been done:
loading images through promises when the
promises have worked, starting the drawing, the
code for drawing circles has been replaced with drawing pictures