Meu codigo mudando cores e aumentando a bolinha

<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 raio = 10
 var cores  = ["blue","red","green", "yellow" ]
 var CorInicial = 0;
    function desenhaCirculo(evento)
    {

        var raioInicial = 0 // começa do 10
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores[CorInicial]
        pincel.beginPath();
        pincel.arc (x,y,raio,0,2 * 3.14);
        pincel.fill();
        console.log (x + ',' + y )

         if (evento.shiftKey) {

            raio = raio+10;
            CorInicial++


        if (CorInicial >= cores.length)
        {
            CorInicial = 0
        }

       pincel.fillStyle =  cores[CorInicial]
        pincel.beginPath();
        pincel.arc (x,y,raio,0,2 * 3.14);
        pincel.fill();
    }

    }

    tela.onclick = desenhaCirculo;


</script>