circulo cambia colores

<canvas width="1200" height="800"></canvas>

<script>
  var pantalla = document.querySelector("canvas");
  var pincel = pantalla.getContext("2d");
  pincel.fillStyle = "grey";
  pincel.fillRect(0,0,1200,800);
  var colores = ["blue", "green", "red"];
  var indiceColorActual = 0; //para que comience con azul


  function dibujarCirculo(evento){
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY - pantalla.offsetTop;
      pincel.fillStyle = colores[indiceColorActual];
      pincel.beginPath();
      pincel.arc(x,y,20,0,2*Math.PI);
      pincel.fill();
    console.log(evento);
  }

  pantalla.onclick = dibujarCirculo;

  function alertarColor(){
    indiceColorActual++;
    if(indiceColorActual>= colores.length){
      indiceColorActual = 0;
    }
    return false;
  }

  pantalla.oncontextmenu = alertarColor;

</script>