[Projeto] Mudando a cor da bolinha

Pessoal segue o meu código para mudar a cor da bolinha, eu acrescentei mais uma cor no array.

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

<script>


        var tela = document.querySelector('canvas'); // seleciona o canvas
        var pincel = tela.getContext('2d'); // seleciona o formato 2D

        pincel.fillStyle ="grey"; // fundo do canvas recebe cinza
        pincel.fillRect(0, 0, 600, 400); // determinar posição e tamanho do canvas
        var cores = ["blue","red","green","black"] // cria array cores, definindo as cores que serão alteradas
        var corInicial = 0; //determina que a cor inicial será a que esta na posição 0


        function desenhaCirculo(evento) {

            var x = evento.pageX - tela.offsetLeft; // determina posição x do clique do mouse
            var y = evento.pageY - tela.offsetTop; // determina posição y do clique do mouse
            pincel.fillStyle = cores[corInicial] // determina a primeira cor ao clique do mouse
            pincel.beginPath(); // começa desenhar o circulo
            pincel.arc(x, y, 10, 0, 2* Math.PI); // desenha o circulo
            pincel.fill(); // preenche o circulo com a cor inicial
            console.log(x + "," + y); // coloca a posição do mouse no console

        }

        tela.onclick = desenhaCirculo; // executa a função desenhaCirculo ao clique do mouse

        function mudaCor() {
            corInicial++; // acrescenta contador + 1 a cor inicial
            if (corInicial >= cores.length) { // le todo o comprimento do array (lista)
                corInicial = 0 // retorna para a cor inicial
            }

            return false; 
        }

        tela.oncontextmenu = mudaCor;



</script>