Meu paint ficou assim

ficou bem parecido com o apresentado pelo professor, para meu controle eu acabei colocando um alert qndo fosse clicado na cor, avisando a troca

<meta charset = 'utf-8'>
<h1>Desenho com mudança de cores</h1>
<hr><br>
<canvas width="600" height="400"></canvas>
<script type="text/javascript">

    function desenhaQuadrado(x, y, tamanho, cor){

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.fill();
    }

    function desenhaCirculo (x, y, raio, cor){

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*Math.PI);
        pincel.fill();
    }

    function desenhaPaletaDeCores(){
        desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red');
        desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green');
        desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');
    }

    function lidaComMovimentoDoMouse(evento){

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

        if (y>tamanhoQuadrados && desenha) {

            desenhaCirculo(x, y, 5, corAtual);

        }
    }

    function habilitaDesenhar() {

        desenha = true;
    }

    function desabilitaDesenhar(){

        desenha = false;
    }

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0,0,600,400);

    var desenha = false;
    var corAtual = 'blue';
    var xVermelho = 0;
    var xVerde = 50;
    var xAzul = 100;
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;

    desenhaPaletaDeCores();

    function mudaCor(evento){

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

        if ((x < xVermelho + tamanhoQuadrados) && 
            (y < yQuadrados + tamanhoQuadrados)) {
                alert('vermelho');
                corAtual = 'red';
        } else if (x >= xVerde && x < xAzul && 
            (y < yQuadrados + tamanhoQuadrados)) {
                alert('verde');
                corAtual = 'green';
            } else if (x >= xAzul && (x <= xAzul + tamanhoQuadrados) && 
                (y < yQuadrados + tamanhoQuadrados)) {
                alert('azul');
                corAtual = 'blue';
                }
    }


    tela.onmousemove = lidaComMovimentoDoMouse;
    tela.onmousedown = habilitaDesenhar;
    tela.onmouseup = desabilitaDesenhar;
    tela.onclick = mudaCor;




</script>