I want to make a game fullscreen but when I do the click collisions are messed up, here is how things behave...

function fullScreen() {
    if(canvas.webkitRequestFullScreen) {
      canvas.webkitRequestFullScreen();
    } else {
      canvas.mozRequestFullScreen();
      }
}
var button = {
    x:20,
    y:60,
    width:50,
    height:50
}

I have an event listener that listens for a click and checks if we have clicked the button using the mouse and buttons coordinates. However when we change the canvas size in the full-screen function, the coordinates are messed up and not exact with what the user is seeing, how do I fix this and align the coordinates no matter the size of the canvas?