Javascript Help with Animation

Hello, I need HTML5 and Javascript code to do the following:

Part 1 – You will animate an object on a canvas. You will animate a circle that is drawn on the screen. The object will bounce around the screen – in this case start the object animation diagonally across the screen. The angle does not matter, if you increment x and y locations by same amount that will be 45 degrees – different values will give you different amounts.

The object should be bounded (just use a square or rectangle). The object should remain in the bounded area- you can keep it inside the area – by simulating a bounce or send it off in another random direction, or simply have it stop – or choose a new random angle (will require a little bit of math).

You can also have the animation follow a path by using a calculated set of coordinates.

Part 2 – The object will respond to a mouse click by doing something. You can have the object change direction, color, image, any visible response to a mouse click event, my favorite was ones that exploded or do some other silly effect.

I recommend using timer based animation.

Note, the webpage/code must pass the following compliance checkers (no errors): https://achecker.ca/checker/index.php and https://validator.w3.org/