[Duda] Duda al cambiar de color verde a azul

Al hacer click del color verde a regresar al azul tengo que dar un segundo click, cuando está en verde y doy el 1er click no hace nada y luego regresa al azul en el 2do click, ya cambié posición a 0 al final del if pero hace lo mismo pero ya no pasa al azul, pasa al rojo. Alguien que me ayude a identificar porque tengo que dar un 2do click? gracias!

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

<script>

var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
var colores = ["blue","red","green"];
var posicion = 0;

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

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

    pincel.fillStyle = colores[posicion];
    pincel.beginPath();
    pincel.arc(x,y,20,0,2*Math.PI);
    pincel.fill();
    console.log(x + "," + y);
}

function cambiarColor(){

    posicion = posicion + 1;        

    pincel.fillStyle = colores[posicion];
    pincel.fill();
    if(posicion >= colores.length){
        posicion = -1;
    }
    return false;
}


pantalla.onclick = dibujarCirculo;
pantalla.oncontextmenu = cambiarColor;

</script>