no cambia de color

ya encontré los errores muchas gracias. me falta la iteración y eliminar una función o comentarla. y ya esta funcionando bien, adjunto el codigo por si le sirve a alguien.

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

<script>


    var pantalla = document.querySelector("canvas");// variable que asocia javaScript con la etiquta "canvas" en html.
    var pincel = pantalla.getContext("2d");// en esta variable "pincel", pedimos que nos envie todo lo que esta en la pantalla, (en el "canvas").

    pincel.fillStyle = "grey"; // propiedad, o parametro para darle color a la pizarra.
    pincel.fillRect(0,0,900,600 );//función pincel que sirve para rellenar rectangulos. tiene 4 parametros.

    var colores = ["blue","red","green"];
    var indiceDeColores = 0;


    /*function exibhirAlerta(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        console.log(evento);
        alert("Usted hizo click en estas coordenadas, " + x + " , " + y); 

    }*/

    function dibujarCirculo(evento) {

        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;


        pincel.fillStyle = colores[indiceDeColores];
        pincel.beginPath();
        pincel.arc(x, y, 20, 0, 2*3.14);
        pincel.fill();
        console.log(+ x + " , " + y);

    }
    pantalla.onclick = dibujarCirculo;

    function alterarColor(evento) {

        indiceDeColores++;

        if (indiceDeColores >= colores.length){
            indiceDeColores = 0;
        }


        alert("Funcionó");
        return false;

    }

    pantalla.oncontextmenu = alterarColor;   







</script>

Muchas Gracias! Me ayudó mucho!