No cambia el color

aqui te dejo tu codigo resuelto espero que se entienda y te sirva.

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

    <script>
      var pantalla = document.querySelector("canvas");
      var pincel = pantalla.getContext("2d");

      var contador = 0; //Inicializamos el contador en 0
      var colores = ["blue", "red", "green"]; //Creamos el array con dichos colores

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

      function dibujarCirculo(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

        pincel.fillStyle = colores[contador]; //Llamamos al array "colores" con el numero de posición que va a tener el contador (En este caso el contador será : 0, 1 ó 2)
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();

        console.log(x + " , " + y);
      }

      function alterarColor() {
        if (contador == colores.length - 1) {
          // Recordar que los array comienzan desde el 0.
          contador = 0;
        } else {
          contador++;
        }

        return false;
      }

      //   pantalla.oncontextmenu = alterarColor;


      //escuchamos el evento click del mouse izquierdo
      pantalla.addEventListener("click", (e) => { 
        alterarColor()
        dibujarCirculo(e);
      });

      //escuchamos el evento click del mouse derecho
      pantalla.addEventListener("contextmenu", (e) => {
        alterarColor()
        dibujarCirculo(e)
      });

      /* pantalla.onclick = dibujarCirculo; */
    </script>

Hola Saul, muchas gracias! Veo además de que tenía el error en los " " de los colores, me falto la ultima parte que agregaste:

      //escuchamos el evento click del mouse izquierdo
      pantalla.addEventListener("click", (e) => { 
        alterarColor()
        dibujarCirculo(e);
      });

      //escuchamos el evento click del mouse derecho
      pantalla.addEventListener("contextmenu", (e) => {
        alterarColor()
        dibujarCirculo(e)
      });

Sólo que me cuesta un poco entender la función de esto, por que se agrega un evento de sonido y hay una e entre parentesis? Gracias!

se pone la letra e en la funcion porque esta escuchando un evento que ya existe y fue escrito ademas en la funcion por ejemplo en function

// la letra e solo hace referencia a la palabra evento

dibujarCirculo(**evento**) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;


      }

// tambien puedes hacer una prueba usando el mouse o teclado con este codigo y te manda toda la informacion:

//si tienes un input

pantalla.addEventListener("keyup", (e) => { 
        console.log("e")
      });

//para usar el click de ejemplo

addEventListener("click", (e) => { 
        console.log("e")
      });

y mira los resultados en consola. te sorprendera la cantidad de informacion que te manda.

Muchas gracias!! :D