[Proyecto] Cambio de color de circulo

Buenas les comparto mi codigo debe haber una solucion mas practica pero es la que se me ocurrio

se podria mejorar que por mas que haga mas de un click se respete el orden de los colores a cambiar,

pero no lo pude implementar

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

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");    
    pincel.fillStyle = "grey";
    pincel.fillRect(0,0,600,400); 

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

    function dibujarCirculo(evento, color){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;    
        pincel.fillStyle = colores[id_color];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);        
    }
    pantalla.onclick = dibujarCirculo;

    function alterarColor() {
        id_color ++;
        if(id_color == colores.length){
            id_color = 0;
        }
        return false;
    }

    pantalla.oncontextmenu = alterarColor;

</script>