Trocando de cor. Modificando o problema e um pouco sobre escopo de variáveis.

Resolvendo este problema me veio a ideia de tentar modicá-lo. E se eu quisesse mudar a cor dele apenas depois de já ter desenhado na tela? Para isso meu raciocínio foi que ao clicar com o botão direito, eu teria que sobrescrever o circulo criado com uma cor diferente. Para isso precisei de alguma forma capturar as coordenadas x e y, e repeti-las dentro da função do botão direito. No entanto para fazer isso tive que mudar a forma de declarar as variáveis x e y, tirando o var e fazendo com que fossem variáveis globais, ficou assim:

<canvas width="600px" height="400px"></canvas>

<script>

    var tela = document.querySelector('canvas')
    var pincel = tela.getContext('2d')

    pincel.fillStyle = 'grey';
    pincel.fillRect(0,0,600,400);

    var cores = ['blue', 'red', 'green']
    var indiceCorAtual = 1; 

    function desenhaCirculo(evento){
        x = evento.pageX;
        y = evento.pageY;

        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + ',' + y)
    }

    tela.onclick = desenhaCirculo;


    function mudaCor() {

        if(indiceCorAtual == cores.length){
            indiceCorAtual = 0
        }

        pincel.fillStyle = cores[indiceCorAtual];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        indiceCorAtual ++
        pincel.fill();

        return false;
    }

    tela.oncontextmenu = mudaCor;

</script>

Está satisfatório dessa forma, mesmo tendo que declaras variáveis globais dentro da função?