[Projeto] Desenhando com o mouse

Fiz todos os exercícios desse módulo aplicado no mesmo código.

<style>
    main {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

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

<script>
    function desenhaCirculo(evento){
        if (!desenha) {
            return;
        }

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

        if (evento.shiftKey && evento.altKey) {
            alert("Aperte uma tecla de cada vez");
        } else if (evento.shiftKey && raio < 40) {
            raio += 10;
        } else if (evento.altKey && raio > 10) {
            raio -= 5;
        }

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

    function mudaCor(){
        if (indiceCor < cores.length - 1) {
            indiceCor++;
        } else {
            indiceCor = 0;
        }
        return false;
    }

    function ligaDesenho(evento){
        desenha = true;
        desenhaCirculo(evento);
    }

    function desligaDesenho(){
        desenha = false;
    }

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

    var cores = ["blue", "red", "green"];
    var indiceCor = 0;

    var desenha = false;
    var raio = 10;

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

    tela.onmousemove = desenhaCirculo;
    tela.onmousedown = ligaDesenho;
    tela.onmouseup = desligaDesenho;
    tela.oncontextmenu = mudaCor;

</script>