Meu código não funciona

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

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

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

    var cores = ['black', 'white', 'green', 'blue', 'yellow', 'pink', 'orange', 'brown'];
    var indiceCorAtual = 0;

    function desenhaQuadrado(x, y, tamanho, cores){
        for(var i = 0; i < cores.length; i++) {
            pincel.fillStyle = cores[i];
            pincel.fillRect(x, y, tamanho, tamanho);
            pincel.strokeStyle = 'black';
            pincel.strokeRect(x, y, tamanho, tamanho);
            x = x + tamanho;
        }
    }

    function desenhaCirculo(evento) {
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores[indiceCorAtual];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2*Math.PI);
        pincel.fill();
    }

    function mudaCor(cores) {
        indiceCorAtual++;
        if(indiceCorAtual >= cores.length){
            indiceCorAtual = 0;
        }
        console.log(indiceCorAtual);
        return false;
    }


    //desenhaQuadrado(2, 2, 30, cores);

    tela.onclick = desenhaCirculo;
    tela.oncontextmenu = mudaCor;

</script>

Ele não zera a cor, fica preso na última cor do array.