Desenha círculos com core aleatória em um array

<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 desenha = false;

function desenhoCirculo(evento) {
 //Valida o desenho
     if(desenha){
         var eixoX = evento.pageX - tela.offsetLeft;
         var eixoY = evento.pageY - tela.offsetTop;

         var raio = 10;
        //Cria cores aleatorios no array (são 11 cores pois o array conta de 0 as 10)
         var cores= ['blue','green','yellow', 'red','black','purple','white','gold','violet','silver','brown'];
         var  corAleatoria = Math.round(Math.random( )*10);

         cor = cores[corAleatoria];
         //Aumenta do circulo
         if (evento.shiftKey) {

             raio = raio + 10;
         }

         pincel.fillStyle = cor ;
         pincel.beginPath();
         pincel.arc(eixoX, eixoY, raio, 0, 2*3.14);
         pincel.fill();
          //Lista os resultados no console
         console.log(cor);
         console.log(eixoX +" e "+ eixoY);
          console.log(evento);
    }
 }


function habilitaDesenhar() {

    desenha = true;
}

 function desabilitaDesenhar() {

    desenha = false;
}

tela.onmousemove = desenhoCirculo;
tela.onmousedown = habilitaDesenhar;
tela.onmouseup = desabilitaDesenhar;
</script>