Then, create an onclick event handler on the canvas so that every time the canvas is clicked the

following things happen:

Get the $x$ and $y$ coordinate of the click that just occurred $($hint: offsetX and offsetY$)$

Create an array that contains the $x,y$ coordinate and push it into the global array

Then draw and fill a circle of radius $10$ centered at this $(x,y)$ coordinate

Upon completing this step, when you click on the canvas three times your canvas should look like:

Now create a keydown event listener on the textbox so that when the Enter key is pressed in the

textbox a function executes. The function should do the following things:

Get the radius from the textbox and check if it is valid $($i$.$e$.,$ is between $1-25).$

If it is not valid produce an alert that the radius is invalid.

If the radius is valid, the canvas should be cleared and your function should loop through all of

the points in the array, drawing and filling a circle at each point using the new radius.

Here are some screenshots showing the result after pressina enter in the textbox: