HTML5 Canvas | Populating circles with images via a loop

Hi Coders,

I have adapted a really cool block of code that adds gravity, collisions to balls dropped into a canvas.

I can give the original code on request.

Here is my code:
Visit the codepen website
Add this extension to find my pen: /anon/pen/QoWgaQ

Can someone PLEASE help me to populate each ball with the images in the imageArray, Prevent the balls from leaving the bounds of the canvas, Stop the first ball from appearing as a black ball.

I think the issue resides in the for loop where I iterate through the images array. And the drawing of the bitmap and circle.

Look for initBalls, and addBall for the relevant code.

Thank you so much to anyone who takes the time I have spent about a day and a half trying different methods and this is the closest I have come.

EDIT - I have prevented the black ball issue, I now need help with passing the correct image src to the addBall(), and making the balls stay in the bounds of the canvas. Here is the new link:

Visit: codepen {dot} io
Append this string: /jason-is-my-name/pen/BbNRXB

Thanks, Jason.

To make sure they don’t leave the canvas you need to check the ball position and invert the direction or make it appear on the other side (what you prefer) when on canvas limit - I don’t know how to apply it exactly with your situation but I have created a few animations

Thanks for visiting my post - I am unable to achieve what you have said. As for the repeating of only the last image in the array?

Do you have any youtube video link for the process?

I don’t know what that means, I have given a codepen link, that has the code in it.

Hello?.. World?..