Minha versão para o programa Mudando de Cor. A do instrutor ficou bem mais simples...

<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 cor = 'blue';

    var cores = ['blue', 'red', 'green'];

    function desenhaCirculo(evento) {
        //no firefox é assim, e não evento.pageX e evento.pageY como no chrome
        var x = evento.x - tela.offsetLeft;
        var y = evento.y - tela.offsetTop;
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);

    }


    function mudaCor() {

        var mudouCor = false;

        var posicao = 0;

        var ajustaLength = cores.length - 1;

        while (posicao <= cores.length) {
            if (cores[posicao] == cor)  {
                    if (posicao < 2) {

                        cor = cores[posicao + 1];
                        console.log([posicao +1]);
                        mudouCor = true;

                    }  else   {
                        cor = cores[0];
                        mudouCor = true;
                        }

            } else    {
                posicao++;
                }

            if (mudouCor)   {

                alert('Funcionou!');
                mudouCor = false;
                break;
            }
        }

    return false;
    }


    tela.onclick = desenhaCirculo;

    tela.oncontextmenu = mudaCor;


</script>