bolinha grande + duvida | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Fiz o código para aumentar, mas estou com uma duvida sobre a utilização da palavra evento.Esse termo representa uma função especifica no JavaScript? Ou essa função foi estabelecida no código quando colocamos o termo no parametro da função desenha circulo?

<canvas width="600" height="400"></canvas>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var aumentaCirculo = 10;

    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';
        pincel.beginPath();
        pincel.arc(x, y, aumentaCirculo, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);


        if (evento.shiftKey == true) {
            aumentaCirculo = 20;
        }
    }

    tela.onclick = desenhaCirculo;

</script>

Olá, João, tudo bem?

Obrigada pelo aguardo de uma resposta.

Os eventos são um conjunto de ações que um programa ou script executa em resposta a alguma coisa que o usuário fez. Pode ser em um texto, imagem, um conjunto de elementos, div ou a janela do navegador. Quando esse evento acontecer, o sistema irá apontar algum sinal, e será executada alguma ação no sistema. Há diversos eventos, alguns são:

onClick: o elemento é clicado pelo usuário;
onKeyPress: o usuário pressiona uma tecla sobre o elemento;
onSubmit: define ação ao enviar um formulário;

Note que no nosso código colocamos, a variável evento como parâmetro da nossa função desenhaCirculo. Ao clicar na tecla shift ele vai realizar uma ação, que será atribuir o valor 20 a variável aumentaCirculo. Já na tela.onclick, ao clicar no elemento tela, será executada a ação de atribuir na variável tela a execução da função desenhaCirculo.

Quanto ao seu código, para a solução da atividade ser mais assertiva, para quando soltar a tecla shift, a bolinha voltar ao seu tamanho inicial, é necessário declarar a variável aumentaCirculo dentro da função desenhaCirculo. Além disso, você está atribuindo o valor 20 a variável aumentaCirculo, quando, na verdade, ela tem que incrementar 20 ao valor inicial.

Segue o código com algumas alterações:

<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;
        var aumentaCirculo = 10;
        console.log(x + ',' + y);       


        if (evento.shiftKey == true) {
            aumentaCirculo = aumentaCirculo + 20;
        }
        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, aumentaCirculo, 0, 2 * 3.14);
        pincel.fill();

    }

    tela.onclick = desenhaCirculo;

</script>

Deixei as variáveis com o mesmo nome que você utilizou, mas lembre-se que o código deve ser compreensível para outros programadores. Apesar de o funcionamento ser igual, convém utilizar o nome raio ao invés de aumentaCirculo. Espero ter ajudado.

Reforço que estou à disposição para tirar dúvidas.

Abraços,

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!