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

Fiz de outra maneira, na minha visão parece ser mais "simples"

Não criei uma variável para o raio, apenas mudei ela dentro do IF

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

            if(evento.shiftKey){

                var x = evento.pageX - tela.offsetLeft;
                var y = evento.pageY - tela.offsetTop;
                pincel.fillStyle = 'blue';
                pincel.beginPath();
                pincel.arc(x, y, 30, 0, 2 * 3.14);
                pincel.fill();
                console.log(x + ',' + y);

            }


    }

    tela.onclick = desenhaCirculo;



</script>
1 resposta
solução!

Olá, Gabriel! A ideia que você teve é bem interessante, porém, da forma que foi executada você acaba repetindo um bloco de código duas vezes que não seria necessário repetir. Uma coisa que você poderia fazer para otimizar um pouco o código, sem criar uma variável para passar o valor do raio, seria o seguinte:

<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';
            pincel.beginPath();
            console.log(x + ',' + y);

            if(evento.shiftKey) //Se Tecla SHIFT foi pressionada -> raio com valor 30
            {
                pincel.arc(x, y, 30, 0, 2 * 3.14);
            }
            else //Senão -> raio com valor 10
            {
                pincel.arc(x, y, 10, 0, 2 * 3.14);
            }

            //Desenha o círculo na tela
            pincel.fill();
        }

        tela.onclick = desenhaCirculo;

    </script>

Dessa forma, o bloco de código antes do "if(evento.shiftKey)" irá ser declarado apenas uma vez. Além disso, a função pincel.arc() e pincel.fill() também serão lidas pelo programa apenas uma vez em todos as situações.