Solução: Desenhe obras de arte

Olá pessoal segue abaixo a solução do problema.

Realizei alguns comentários no código para que eu possa entender melhor cada trecho. Assim tenho mais facilidade para compreender a lógica.

<meta charset="utf-8">

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

<script type="text/javascript">

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

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, lado, lado);
        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,ladoQuadrados,'red');// faz necessário mudar somente o eixo x e a cor, por isso todos recebem a mesma variável no eixo y e lado.
        desenhaQuadrado(xVerde,yQuadrados,ladoQuadrados,'green');
        desenhaQuadrado(xAzul,yQuadrados,ladoQuadrados,'blue');
    }

    function lidaComMovimentoDoMouse(evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        if(desenha && podeDesenharNaArea(x,y)){// Se desenha for verdadeiro, ou seja, se for pressionado o botaão direito do mouse , faça um circulo na área do canvas
            desenhaCirculo(x, y, 5, corAtual); // corAtual recebe a cor azul
        }
    }

    function habilitaDesenhar() {
        desenha = true;
    }

    function desabilitaDesenhar(){
        desenha = false; //
    }

    function podeDesenharNaArea(x,y) { // função com objetivo de impedir que desenhem em cima da paleta de cores criadas.
        if(x >= 0 && x < 3*ladoQuadrados && y >= 0 && y < ladoQuadrados){
            return false;
        } else {
            return true;
        }
    }

    function selecionaCor(evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        // com a declaração das variáveis acima, conseguirei saber em que posição o usuário clicou na área do canvas.

        // começamos com a condição do y que é igual para todos os quadrados.
        if(y > yQuadrados && y < yQuadrados + ladoQuadrados) {
            if(x > xVermelho && x < xVermelho + ladoQuadrados ) {
                corAtual="red";
            } else if(x > xVerde && x < xVerde + ladoQuadrados) {
                corAtual="green";
            } else if(x > xAzul && x < xAzul + ladoQuadrados) {
                corAtual="blue";
            }
        }

    }

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    pincel.fillStyle = 'lightgrey';
    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 ladoQuadrados = 50;

    desenhaPaletaDeCores();

    tela.onmousemove = lidaComMovimentoDoMouse; // Conforme o movimento do mouse, com o botão direito pressionado, é permitido desenha na área do canvas. tela.onmousemove vai receber as instruções da função lidaComMovimentoDoMouse.
    tela.onmousedown = habilitaDesenhar; // função que diz que pode ser desenhado naquela área
    tela.onmouseup = desabilitaDesenhar; // função que diz que não pode ser desenhado naquela área
    tela.onclick = selecionaCor; // Seleciona a cor que deseja desenha, o evento tela.onclick recebe a função que preparamos para selecionar a cor

</script>