Entendendo meu erro!

Olá, Daniel! Tudo bem contigo?

Na verdade, foi só um detalhe!

Podemos desconsiderar o elseda primeira condicional

        if (evento.shiftKey) {

            if (raio < 40) {

                raio = raio + 10;
            }
        }

e também da segunda condicional

        if (evento.altKey) {

            if (raio > 10) {

                raio = raio - 5;

            }
        }

Veja que, quando seguramos o shift e enquanto o raiofor menor que 40, vai adicionando 10ao raio.

O mesmo acontece segurando o altpara que, enquanto o raiofor maior que 10, subtraia 5.

Podemos até colocarmos >=ou<=, mas fica a critério ;-)

Minha indicação seria as apostilas da Caelum que estão disponíveis para download gratuitamente!

Lá você encontrará Desenvolvimento Web com HTML, CSS e Javascript, Java e Orientação a Objetos, Java Web, Python e mais algumas.

Creio que vai te ajudar bastante!!!

Um abraço e bons estudos, Daniel!!!

Muito obrigado pelos esclarecimentos e indicação do material didático!

Mas gostaria de entender exatamente qual é o funcionamento do código na maneira que eu havia escrito, que o faz travar (apenas funcionar o "evento.shiftKey" e não retroceder).

Você pode me ajudar? Gosto de entender o que está acontecendo, mesmo que de maneira errada. Qual é a atividade que o código está realizando e que o torna ineficiente!

Muito obrigado, mais uma vez!

Abraços, Cássio!

Olá Daniel, tudo bem?

Na verdade você pode observar que o ocasionou o seu erro foi o posicionamento das chaves. Observe que o seu primeiro if (o do shift) está contemplando o seu segundo if(o do alt). Segue o seu código com o posicionamento correto das chaves:

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

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

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

    function desenhaCirculo(evento) {
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        console.log(x + ',' + y);
            if (evento.shiftKey) {
                if(raio<40) {
                    raio = raio + 10;
                } else {
                    raio = 40;
                }
            }
            if (evento.altKey) {
                if (raio>10) {
                    raio = raio - 5;
                } else {
                    raio = 10
                }
            }
        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();
    }
    tela.onclick = desenhaCirculo;
</script>

Qualquer dúvida só mandar mensagem. Abraços, Marcus.