Ao adicionar o altKey, não funcionou mais.

Tentei algumas vezes testar este código.

Pouco antes de implementar as funções "If", para redução do tamanho das bolinhas, funcionava normalmente. Contudo, após isso, não apenas não consegui fazer com que diminuíssem de tamanho, como nem mesmo consigo gerar novos pontos clicando.

Tentei implementar o mesmo código do professor, mas permanece sem funcionar.

O que pode haver de errado?

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

<script>
    var tela = document.querySelector("#tela");
    var pincel = tela.getContext("2d");

    pincel.fillStyle="gray";
    pincel.fillRect(0, 0, 600, 400);

    var cores = ['blue', 'red', 'green']
    var indiceCorAtual = 0; // começa com blue

    var raio = 10;
    var incremento = 5;

    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

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

        if (evento.shiftKey && evento.altKey) {

            alert('Só aperte uma tecla por vez, por favor!');

        } else if(evento.shiftKey && raio + incremento <= 40) {
            raio = raio + incremento;

        } else if(evento.altKey && raio - incremento >= 10) {
            raio = raio - incremento;

        }

    }

    tela.onclick = desenhaCirculo;

    function mudaCor() {

        indiceCorAtual++;
        if(indiceCorAtual >= cores.length){
            indiceCorAtual = 0;
        }
        return false;
    }

    tela.oncontextmenu = mudaCor;

</script>

Também tenho dúvidas de qual comando usar para substituir o ALT, quando utilizando um Mac.

P.S. Mantive a mudança de cores do primeiro exercício no código.