How to use javascript to get circle on HTML canvas to move to point onmouseclick?

So if I draw a circle on HTML5 canvas, I want to make it so that the user can click somewhere in the canva开发者_JAVA百科s and the circle of a given radius will move gradually to the point mouseclicked on the canvas. I know jquery has the animate function, but since the canvas does not have a DOM, I am not sure how to accomplish this.

You will need to continuously repaint the canvas in a loop. A canvas is just a bunch of pixel data. If you want something to animate you have to draw each frame.

First clear the canvas to white (or any other color). Calculate the new position for the circle. Draw it. Wait for a short amount of time. Repeat.