Por que a variável retorna como nao definida, sendo que ja há um valor atribuido a ela?

Estou fazendo projeto de criar circulos atravez do click do mouse, usei declarações de variáveis de posição do mouse assim como proposto pelo instrutor, no botao esquerdo ocorre tudo normalmente, porém ao clicar no direito é onde ocorre o problema. Sei que ele pode ser facilmente resolvido declarando novamente as duas variáveis (x e y) dentro da função "changeColor()", porém ainda nao compreendo o motivo pelo qual nao funciona, caso nao declare novamente. E então vem a duvida, se declarei x e y usando "var", não deveria ter um escopo global? em vez de existir somente no blobo que o compete, como é o caso de "let". Quando abro o console e clico no botao direito aparece a mensagem dizendo q x nao foi definido. Pensei talvez q seja pelo fato de que, por nao ter clicado do botao esquerdo antes, a função nunca foi executada, sendo assim, nao tem como haver mesmo as variáveis, porém mesmo exutando botao esquerdo e botao direito, na sequência, aparece a mesma mensagem... se alguém puder me esclarecer, será de grande ajuda.

//declarações

let canvas = getHtml('#cnvs');
let pencil = canvas.getContext('2d');

function getHtml(x) {
    return document.querySelector(x);
}

//projeto 06

canvas.onclick = drawBall;
canvas.oncontextmenu = changeColor;

function drawBall(event) {

    var x = event.pageX - canvas.offsetLeft;
    var y = event.pageY - canvas.offsetTop;

    pencil.fillStyle = '#1208af';
    pencil.beginPath();
    pencil.arc(x, y, 10, 0, 2 * Math.PI);
    pencil.fill();


    console.log(x + ', ' + y);

}


function changeColor(event) {

    console.log(x + ', ' + y);

}