Ola pessoal o meu codigo não esta a fazer a troca das bolinhas por favor alguem me ajuda
<canvas width="600" height="400"> </canvas>
<script>
var tela= document.querySelector("canvas");
var pencil= tela.getContext("2d");
pencil.fillStyle="grey";
pencil.fillRect(0,0,600,400);
var cores=["blue","red","green"];
var indiceCorAtual=0;
function desenhaCirculo(evento){
    var x= evento.pageX- tela.offsetLeft;
    var y= evento.pageY-tela.offsetTop;
    pencil.fillStyle=cores[indiceCorAtual];
    pencil.beginPath();
    pencil.arc(x,y,10,0,2*3.14);
    pencil.fill();
    console.log(x +"," + y);
}
 tela.onclick= desenhaCirculo;
 function mudaCor(){
 primeiraCor++;
 if(primeiraCor>=selecaoCores.length){
    primeiraCor=0;
 }
  alert("Funcionou");
     return false;
 }
  tela.onContextmenu=mudaCor;
</script>
este é o codigo