Solucion complicada a Cambiando de color

Bueno comparto mi solución al ejercicio Cambiando de color. Como siempre lo intento hacer antes de ver la solucion del instructor, me fui a comparar el color asignado al pincel con los colores de la lista, como en un principio no hacían nada los if si comparaba con "blue", imprimi en un alert el pincel.fillStyle y me di cuenta que regresan un valor hexadecimal, asi que modifique la lista con los valores hexa de los colores y ya en la funcion cambiar color hice las comparaciones dentro de un for.

Ya después vi la solución y me rei un rato pues era mas fácil nomas ir cambiando los indices. Que les parece?

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

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d"); 
    var colors = ["#0000ff", "#ff0000", "#008000"];   //Se agrega en la lista los valores de lod colores en hexadecimal para facilitar las comparaciones
    pincel.fillStyle = "grey";
    pincel.fillRect(0,0,600,400); 
    pincel.fillStyle = colors[0];

    function dibujarCirculo(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;    
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);  
        //alert("Color: " + pincel.fillStyle);      
    }   

    function alterarColor(evento) {

        for (var i = 0; i < colors.length; i++) {
            if(pincel.fillStyle == colors[i] && (i < colors.length-1 )){
                pincel.fillStyle = colors[i+1];
                break
            }else {
                if(pincel.fillStyle == colors[colors.length - 1]){
                     pincel.fillStyle = colors[0];
                }
            }

        }

        //Esta parte hace lo mismo pero no funciona en el caso de agregar mas colores
        /*if(pincel.fillStyle == "#0000ff"){
            pincel.fillStyle = colors[1]; 
        } else if(pincel.fillStyle == "#ff0000") {
            pincel.fillStyle = colors[2]; 
        } else{
            pincel.fillStyle = colors[0];
        } */

        console.log(evento);
        return false;
    }

    pantalla.onclick = dibujarCirculo;
    pantalla.oncontextmenu = alterarColor;

</script>