Galera onde está o erro o meu codigo não funciona so fica com a bolinha azul

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

<script>

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

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

     var cores = ['blue ','red ','green' ]
     var indiceCorAtual = 0;






   function exibeBola(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();
    console.log(x + ',' + y)

    }

     tela.onclick = exibeBola;


    function mudaCor() {

        indiceCorAtual++;
        if(indiceCorAtual >= cores.lenght){
            indiceCorAtual = 0 
        }

      return false;
    }

    tela.oncontextmenu = mudaCor;

</script>