Coloquei a opção de borracha!

Tive que olhar o gabarito do professor para realizar o exercício que foi bem desafiador! Entendi tudo o que ele fez! E além de realizar da forma como ele fez ainda coloquei uma quarta cor 'grey' que funciona como uma borracha, para facilitar o desenho e evitar que a pessoa precise atualizar a tela para limpar o canvas. Também coloquei uma condição que verifica se a variável corAtual está na posição 3, que é a borracha, e um alert aparece em tela avisando que o usuário está utilizando a borracha! Achei que ficou legal! ;)

<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);
    var cores = ['blue', 'red', 'green', 'grey'];
    var corAtual = 0;


    function desenhaCirculo(evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores [corAtual];
        pincel.beginPath();
        pincel.arc (x, y, 15, 0, 2 * 3.14);
        pincel.fill();
    }

    tela.onclick = desenhaCirculo;

    function mudaCor () {
        corAtual++;
        if (corAtual >= cores.length){
            corAtual = 0;
        }
        if(corAtual == 3){
        alert('Você está usando a borracha!');
    }
        return false;  
    }

    tela.oncontextmenu = mudaCor;
</script>