Pong Paddle Movement

Hi all, im new and learning JS and trying to build pong. im following a tutorial but trying to change it.

the line im stuck on is trying to move the paddle when the mouse moves

document.body.addEventListener("mousemove", mouseMoveHandler);

function mouseMoveHandler(event) {
    //console.log(event);
    player.setY(event.clientY - player.getHeight() /2);
}

This works with the assumption that my canvas takes up the entire screen

the tutorial has the canvas full browser, mine is only 800 x 400 and is centered.

how can i get this to only moe and register when im on the canvas? at the moment i can enter the browser and it starts moving even though my mouse is nowhere near it.

----------------------------------------------------------------------

Fixed it

i have a div the same size as the canvas called holder so i did:

holder.addEventListener("mousemove", mouseMoveHandler);

function mouseMoveHandler(event) {
    //console.log(event);
    holder.style.cursor = "none";
    player.setY(event.clientY - player.getHeight() *2 );
}