Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Essa aqui só explode se eu deixar!

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    //configs
    var diametroPadrao = 5; // diametro padrão da bolinha
    var aumentoDiametro = 10; // aumenta em + 10  o diametro // no caso 15
    var diametroMinimo = 5; // o tamanho minimo da bolinha // para a bolinha nao desaparecer
    var diametroMaximo = 40; // o tamanho maximo da bolinha // para a bolinha nao explodir xD

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    var diametro = diametroPadrao

    function desenhaCirculo(evento) {
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        if (evento.shiftKey) {
            diametro = diametro + aumentoDiametro;
            if (diametro >= diametroMaximo) {
                diametro = diametroMaximo;
            }
        }
        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, diametro, 0, 2 * 3.14);
        pincel.fill();
    }

    tela.onclick = desenhaCirculo;

</script>
1 resposta
solução!

Olá Marcus, tudo bem?

Seu código ficou bem legal! Parabéns!! Ele está bem funcional e legível.

Recomendo dar uma olhadinha na Opinião do Instrutor para analisar e poder comparar com o seu código!

Qualquer duvida é só chamar! Bons estudos!!