Animating a bouncing ball on the canvas is a classic project that combines your knowledge of drawing, animation loops, and simple physics. In this project, you will create a ball that moves under the influence of gravity and bounces off the edges of the canvas. The animation should appear smooth, with the ball accelerating downwards and reversing its direction when it hits the canvas boundaries. The core requirements are to draw a ball, animate its motion, apply gravity, and handle wall collisions so the ball bounces realistically.

To understand how the bouncing ball animation works, start with the animation loop. The animate function uses requestAnimationFrame to repeatedly clear the canvas, draw the ball, and update its position. The ball's position is updated each frame by adding its velocity values (vx and vy) to its x and y coordinates. Gravity is simulated by increasing the vertical velocity (vy) every frame, making the ball accelerate downwards.

When the ball reaches the bottom of the canvas, a collision is detected if the ball's bottom edge passes the canvas height. The vertical velocity is reversed and reduced by multiplying it by the bounce factor, making the ball bounce back up but not as high as before. Similar checks handle collisions with the top, left, and right edges, reversing the appropriate velocity and ensuring the ball stays within the visible area. This creates the effect of a ball bouncing around the canvas, influenced by gravity and losing energy with each bounce.