Quando o círculo chega na última cor, ela não volta para a primeira

Pessoal, consegui fazer o exercício mantendo a mudança de cor proposta no exercício anterior, porém percebi que quando a cor muda até a última definida ela não volta automaticamente para a primeira. Onde estou errando?

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

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

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

var cor = ["blue", "red", "yellow", "green"]; var i = 0 raio = 10

`function desenhaCirculo(evento){

var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;```

```console.log(x + "," + y);

evento.shiftKey = true
evento.altKey = true

if(evento.shiftKey == true && raio <=40 ){
    raio = raio + 10;

}else if (evento.altKey == true && raio >=10){
    raio = raio - 5;
}```

```pincel.fillStyle = cor[i];
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * 3.14);
pincel.fill() ```

}

tela.onclick = desenhaCirculo;

function mudaCor(){ i++ if(i >= cor.legth){ i = 0 } return false; }

tela.oncontextmenu = mudaCor;

</script>