Solução simples e diferente que também funcionou!

Primeiro, fiz um array com as cores desejadas. E coloquei corAtual pra começar na posição 0 (vermelho, cor do primeiro quadrado).

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

Alterei o pincel.fillStyle do desenhaCirculo de acordo com o array:

pincel.fillStyle = cores[corAtual];

Agora, fiz a função escolheCor, com uma lógica um pouco diferente. Sabendo as coordenadas dos quadrados, coloquei os valores delas em x e y, usando "if" e "else if". E a variável corAtual muda de acordo com essas condições e a posição no array:

    function escolheCor(evento) {
        var x = evento.pageX;
        var y = evento.pageY;

        if (x >= 0 && x <= 49 && y <= 50) {
            corAtual = 0;
        } else if (x >= 50 && x <= 99 && y <= 50) {
            corAtual = 1;
          } else if (x >= 100 && x <= 149 && y <= 50){
            corAtual = 2;
          }
    }

Para evitar que o usuário desenhe em cima da linha inteira da paleta de cores, conforme solicitado no exercício, acrescentei um "if" na função desenhaCirculo, com as coordenadas dos quadrados. Se a condição bater, desenha recebe false.

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

        pincel.fillStyle = cores[corAtual];
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();
        if (x >= 0 && x <= 600 && y <= 55) {
            desenha = false;
        }
    }

Por fim, apenas para treinar, criei uma função desenhaTexto. A intenção é de que o texto sempre fique à direita do quadrado azul. Apesar de ter funcionado, não tenho certeza se está função foi feita e chamada corretamente.

    function desenhaTexto(xAzul, yQuadrados, texto) {

        pincel.font="20px Georgia";
        pincel.fillStyle="black";
        pincel.fillText(texto, xAzul, yQuadrados);

    }

desenhaTexto é chamada dentro da função desenhaPaletaDeCores.

    function desenhaPaletaDeCores() {

        desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, "red");
        desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, "green");
        desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, "blue");
        desenhaTexto (xAzul + 60, yQuadrados + 30, "Clique em um quadrado para escolher a cor!"); //Sem o +30, o texto fica muito para cima.

    }

Código completo:

<meta charset="UTF-8">

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

<script>

    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 = cores[corAtual];
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();
        console.log("posição do clique : " + x + ", " + y);
        if (x >= 0 && x <= 600 && y <= 55) {
            desenha = false;
        }

    }

    function desenhaPaletaDeCores() {

        desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, "red");
        desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, "green");
        desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, "blue");
        desenhaTexto (xAzul + 60, yQuadrados + 30, "Clique em um quadrado para escolher a cor!"); //Sem o +30, o texto fica muito para cima.

    }

    function lidaComMovimentoDoMouse(evento) {

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

        if(desenha) {

            desenhaCirculo(x, y, 5, corAtual);
        }
    }

    function habilitaDesenhar() {

        desenha = true;
    }

    function desabilitaDesenhar() {

        desenha = false;
    }

    function escolheCor(evento) {
        var x = evento.pageX;
        var y = evento.pageY;

        if (x >= 0 && x <= 49 && y <= 50) {
            corAtual = 0;
        } else if (x >= 50 && x <= 99 && y <= 50) {
            corAtual = 1;
          } else if (x >= 100 && x <= 149 && y <= 50){
            corAtual = 2;
          }
    }

    function desenhaTexto(xAzul, yQuadrados, texto) {

        pincel.font="20px Georgia";
        pincel.fillStyle="black";
        pincel.fillText(texto, xAzul, yQuadrados);

    }

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

    var desenha = false;
    var corAtual = 0;
    var xVermelho = 0;
    var xVerde  = 50;
    var xAzul = 100;
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;
    var cores = ["red", "green", "blue"]

    desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores

    tela.onmousemove = lidaComMovimentoDoMouse;

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

    tela.onclick = escolheCor;

</script>