Exercício 07 - Fiz dessa maneira.

Eu gosto de quebrar a cabeça até conseguir fazer, por isso que demoro pra acabar o curso kkk Mais tudo bem. Quero saber se dessa maneira que montei fica claro o que quero fazer

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

<button>Limpar Tela</button>

<script>

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

    var button = document.querySelector("button");

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

    var cores = ["black", "blue", "red", "yellow", "purple", "pink", "green"];
    var corAtual = 0;

    var raio = 10;
    var raioLimite = 40;

    tela.onclick = desenhaCirculo;
    tela.oncontextmenu = mudaCor;
    button.onclick = limpaTela;

    function desenhaCirculo(evento){

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

        if(evento.shiftKey){

            raio = raio + 10;

            if(raio >= raioLimite){

                raio = raioLimite;
            }
        }

        if(evento.altKey){

            raio = raio - 5;

            if(raio < 10){

                raio = 5;
            }
        }


        pincel.fillStyle = cores[corAtual];
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();
    }

    function limpaTela(){

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

        raio = 10;
        corAtual = 0;
    }

    function mudaCor(){

        corAtual++;

        if(corAtual >= cores.length){

            corAtual = 0;
        }

        alert("Cor escolhida: " + cores[corAtual]);
        return false; 
    }

</script>

Obrigado. Ótima terça-feira. Fique com Deus.