Cambio de color de circulo

Hola, les comparto mi codigo, agregue una alerta para avisar que color se esta usando al cambiar de color

<meta charset="utf-8">

<h1>Circulos de colores</h1>

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

</canvas>


<script>


    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,10,0,2*3.14)
        pincel.fill();
        console.log(x + " , " + y);
    }

    function cambiarColor(){
        indiceColorActual++; //mueve el contador indice del array
        if(indiceColorActual >= colores.length){
            //si el indicador actual supera el indice maximo en este caso 2 del array de colores este vuelve a cero comenzando en color azul nuevamente
            indiceColorActual = 0;

        }
        alert("Selecciono el color: "+color[indiceColorActual]); 
        return false;
    }

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    var colores = ["blue", "red", "green"];      // array que contiene los colores
    var color = ["Azul","Rojo","Verde"]  ;
    var indiceColorActual = 0; // comienza con blue



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




    pantalla.onclick = dibujarCirculo; //dibuja los circulos

    pantalla.oncontextmenu = cambiarColor; //cambia el color




</script>