usar o array

olá, fiz o codigo onde ao apertar shift, alem da bolinha aumentar ela mudaria de cor, mas nao esta funcionando aparece apenas a cor vermeha que no caso seria o primeiro numero do array , queria saber por que nao esta considerando o primeiro numero do array que é blue , onde seria assim blue = 0 red = 1, pink = 2 , mas oque esta acontecendo é que so aparece a bolinha red alguem saberia me explicar porque segue o codigo:

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



<script> 



        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");

        pincel.fillStyle = "gray"
        pincel.fillRect(0,0,600,400);
        var cores = ["blue","red", "pink"];
        var i = 0;
  function desenhaCirculo (evento){
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;
    pincel.fillStyle = "blue"
    pincel.beginPath();
    pincel.arc(x,y,10,0,2 * 3.14);
    pincel.fill();

    if(evento.shiftKey){
      pincel.fillStyle = cores [i];
    pincel.beginPath();
    pincel.arc(x,y,20,0,2 * 3.14);
    pincel.fill();
  } else{pincel.fillStyle = "blue"
    pincel.beginPath();
    pincel.arc(x,y,10,0,2 * 3.14);
    pincel.fill();}

}

i++

if(i>=cores.length){

        i=0
}
tela.onclick = desenhaCirculo;







</script>