Comportamento estranho tela.onclick | JavaScript

Estava brincando com o código abaixo e resolvi criar um array para gerar tamanhos aleatórios de bolinhas, porém o tamanho delas não condizem com os valores, estão com uma escalam muito menor e não sei onde errei

<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);

    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = 'blue';

        var raio = [10, 20, 30, 40, 100, 200];

        console.log(x + ',' + y);

        if (evento.shiftKey) {

          raio = [(Math.random() * raio.length)];
        }

        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();
    }

    tela.onclick = desenhaCirculo;

</script>

Oi Carlos, tudo bem?

Na verdade, o método onclick está normal, o problema está na hora de pressionar shift. O que acontece é o seguinte: na variável raio, você não está sorteando um valor desses que estão no array, você está na verdade sorteando um valor entre 0 e 6, pois raio.length é 6, já que temos 6 elementos nesse array, e igualando esse valor na variável raio. Mas na verdade, você deveria colocar esse valor sorteado no índice da variável raio, pois assim, conseguimos pegar um valor de dentro do array.

Vou explicar melhor! Veja o código abaixo:

var raio = [10, 20, 30, 40, 100, 200];
if (evento.shiftKey) {
         raio = [(Math.random() * raio.length)];
}

Esse é seu código no momento. Agora vamos supor que esse comando: (Math.random() * raio.length) retorne o valor 5. Portanto, temos algo desse tipo:

var raio = [10, 20, 30, 40, 100, 200];
if (evento.shiftKey) {
         raio = [5];
}

Veja que nós sobrescrevemos o valor de raio para apenas 5, por isso sua bolinha está tão pequena. Mas na verdade o que queremos é pegar o raio de índice 5, que seria o valor 200 (lembrando que o índice do array começa em 0). Para termos esse comportamento, podemos fazer algo do tipo:

function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = 'blue';

        var raio = [10, 20, 30, 40, 100, 200];

        console.log(x + ',' + y);

        let i = 0;
        if (evento.shiftKey) {
          i = Math.floor(Math.random() * raio.length);
        }

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

Veja que eu adicionei o método Math.floor() para retornar um número inteiro, pois Math.random() retorna números quebrados, e nosso índice precisa sempre ser um inteiro.

Agora, sempre quando pressionarmos shift, vamos ter um número sorteado entre 0 e 5, que representa o nosso índice do array (não é entre 0 e 6 pois o método .floor() retorna sempre o menor número possível). E então, mandamos para a função pincel.arc(), o raio cujo índice é determinado pelo sorteio entre números!

Espero ter ajudado, bons estudos =)

Mergulhe em programação