Next step is writing a code for the canvas mouse down event handler.

7.1. In your JS file, go to canvasMouseDown function.

7.2. Make sure your function has an input parameter for the even object.

7.3. Given you choose e as the name for your event object, e.offsetX and e.offsetY give you x and y of the location that you

clicked on the canvas.

7.4. Because we want to draw the monster centered on the location that we clicked, e.offsetX - w / 2; gives us the x

coordinate of the top-left corner of the monster shape to be drawn. Do the same for y coordinate. Of course, you must use

offsetY and h instead.

7.5. Because we change the values of x and y when we click on the canvas, we must update the values of x and y in the input

boxes on top of HTML page. If you do not update those x, y or w, and h, your monster is drawn on the new location that you

clicked, however, if the user starts changing the values of x and y on the input boxes, the monster is drawn based on the

values that are in the input boxes. That is why if you do not update x and y values in the input boxes, the monster jumps to a

new location, instead of moving from the current location.

7.6. Write a function as updateValues(x, y, w, h).

7.7. In this function, add 4 lines of code for updating the values of x, y, w, and h. the following piece of code is for updating only x

value. You must add 3 more lines for updating y, w, and h.

document.getElementById("x").value = x;

7.8. When you completed updateValues function, call it in canvasMouseDown function.

7.9. After updateValues function, call drawOnCanvas function in canvasMouseDown function.

can you make it as a code..?