trocando de cor a cada toque pra cima

OI, eu foi tentar incrementar o meu código pra exercitar e lógica e travei em uma parte. Minha ideia era tentar fazer a bolinha mudar de cor toda vez que se aperta a seta pra cima, até ai deu certo, porém quando chega no ultimo indice do array eu não consigo fazer ele voltar para o [0]. Alguém pode me ajudar?

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

<script>

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

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

  var x = 20;
  var y = 20;
  var raio = 10;
  var trocaCor = ['blue', 'green', 'yellow', 'red'];
  var posicaoCor = 0;

  // códigos do teclado
  var esquerda = 37;
  var cima = 38;
  var direita = 39;
  var baixo = 40;

  // taxa de incremento
  var taxa = 10;

  function desenhaCirculo(x, y, raio) {
    pincel.fillStyle = trocaCor[posicaoCor] ;
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2 * Math.PI);
    pincel.fill();
  }

  function limpaTela() {
    pincel.clearRect(0, 0, 600, 400);
  }

  function atualizaTela() {
    limpaTela();
    desenhaCirculo(x, y, raio)
  }

  setInterval(atualizaTela, 20);

  function leDoTeclado(evento) {
    if(evento.keyCode == cima && y > 0 + raio) {
      y = y - taxa;
      posicaoCor++;
        if(posicaoCor <= posicaoCor.length) {
          posicaoCor = 0;
        }
    } else if(evento.keyCode == baixo && y < 400 - raio) {
      y = y + taxa;
    } else if(evento.keyCode == esquerda && x > 0 + raio) {
      x = x - taxa;
    } else if(evento.keyCode == direita && x < 600 - raio) {
      x = x + taxa;
    }
  }

  document.onkeydown = leDoTeclado;

</script>