Finally, we write the code for mouse wheel handler function. We want to zoon in or out (scale up or down) the monster by

holding the Ctrl button and rolling the mouse wheel. Holding Ctrl and rolling the wheel forward, makes the monster bigger (Zoom

in).

Holding Ctrl and rolling the mouse wheel backward, makes the monster smaller (Zoom out). Note: the mouse pointer must be on

the canvas, other was the event is not happen to the canvas and instead happens to the page and the whole page becomes

bigger or smaller (because the browser have the same key combination for making a page bigger or smaller).

9.1. First you must cancel the default behavior of the canvas mouse wheel event handler. As I explained, the browser handles

the mouse wheel for zooming in or out of the whole page. Add e.preventDefault(); to prevent the default behavior of

the browser mouse wheel event handling.

9.2. Then check if the Ctrl button is held or not by checking if e.ctrlKey is true.

9.2.1. If it is true, check if e.deltaY is negative or positive. If e.deltaY is negative, it means the wheel moved forward, if

e.deltaY is positive, it means the wheel moved backward.

9.2.2. To make the monster bigger, increment the width of the shape (w) by two and to make it smaller, decrement the w by

2.

9.2.3. To keep the aspect ratio of the shape, h or height of the shape must be incremented and decremented proportional to

the value of w. we write the following code for that purpose.

// before increasing or decreasing of w, we calculate r, the aspect ration of w and h

r = w / h; // r in this expression gives us the aspect ratio of w and h

 // after increasing or decreasing of w, we calculate the value of h based on the new value of w

h = w / r;

9.3. We must call updateValues function to update the values of w and h on HTML.

9.4. Call drawOnCanvas function to draw the monster based on the new values of w and h.

 

 

can you make it as a code