O código abaixo é totalmente inútil ou tem lógica??

Opa, boa noite Reny, tudo bom?

Cara seguinte, eu analisei seu código, e reparei alguns pequenos erros:

• Na linha 11, ao declarar a variável var raioAtual = 0 está faltando o ; (ponto e vírgula).

• Na linha 32, você fecha o laço else, porem não fecha a sua function.

• O código que efetivamente desenha a bolinha, que é o seguinte:

        pincel.fillStyle = 'blue';
            pincel.beginPath();
            pincel.arc(x, y, raioCirculo[raioAtual], 0, 2 * 3.14);
            pincel.fill();
            console.log(x + ',' + y);

  Está localizado dentro do else, sendo assim a bolinha só seria criada se o shift não estivesse pressionado, mas lembrando que sempre que o shift é solto, a var raioAtual volta a valer 0, e então a bolinha no seu tamanho maior nunca é desenhada. Devemos então extrair esse código para fora do laço else, para que a bolinha seja desenhada independente do shift ser ou não pressionado (ação que então passa a controlar apenas o tamanho da bolinha).

• Quando alguém clica na tela, você incrementa a var raioAtual em 1, porem essa variável você também utiliza para acessar um array que possui apenas o index 0 e 1, então se alguém clicar duas vezes na tela sem soltar o shift, a var raioAtual assume o valor de 2, e incrementa a cada clique com o shift pressionado, nesse caso, ao acessar o array, você estaria tentando acessar um index que não existe, então o melhor a fazer é dizer que a var raioAtual assume 0 se o shift não é pressionado, e 1 se é. Ou ainda, adicionar mais valores ao array, porem em algum momento o usuário poderia resolver "testar" o incremento da bolinha e estouraria o array (tentaria acessar algum index que não existe).

Resolvendo os erros acima, escrevi o seguinte código:

<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 raioCirculo = [10, 20];
    var raioAtual = 0;

    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        var aumentaRaioCirculo = evento.shiftKey;

        if(aumentaRaioCirculo == true){

            raioAtual = 1;

        } else {

            raioAtual = 0;

        }
            pincel.fillStyle = 'blue';
            pincel.beginPath();
            pincel.arc(x, y, raioCirculo[raioAtual], 0, 2 * 3.14);
            pincel.fill();
            console.log(x + ',' + y);
}

    tela.onclick = desenhaCirculo;


</script>

Sua ideia de controlar o tamanho da bolinha por um array de tamanhos que tem seu index alterado de acordo com o shift ser ou não pressionado é muito interessante, tenho algumas ideias pra te dar:

• Você pode colocar por exemplo, 5 valores de tamanhos no seu array, e testar com um if else se o usuário está clicando mais de 5 vezes seguidas com o shift pressionado, e então o avisar que a bolinha já esta em seu tamanho máximo, ou melhor, dizer que se a var raioAtual for maior que 4 (porque o array começa no 0), ela simplesmente assume o valor 4.

• O array tem a limitação de ter sempre um numero fixo de index, então pode ser uma melhor ideia trabalhar diretamente com uma var raioCirculo e incrementar seu valor de por exemplo 5 em 5 a cada vez que a tela for clicada com o shift pressionado.

Se sua duvida ainda não foi sanada, por favor, não hesite em perguntar abaixo.

Espero ter lhe ajudado :D

Att - HeronPBV.

Valeu Heron!