Meu resultado com código simplificado e funções anonimas!

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>

<script>

    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;

    function desenhaQuadrado ( x, y, tamanho, cor ) {
        pincel.fillStyle = cor;
        pincel.fillRect ( x, y, tamanho, tamanho )
        pincel.fill ( );
        pincel.strokeStyle = "black";
        pincel.strokeRect ( x, y, tamanho, tamanho );
    }

    function desenhaCirculo ( x, y, raio, cor ) {
        pincel.fillStyle = cor;
        pincel.beginPath ( );
        pincel.arc ( x, y, raio, 0, 2 * 3.14 );
        pincel.fill ( );
    }

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

    tela.onmousemove = function ( evento ) {
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        if ( ( x <= xAzul + tamanhoQuadrados + 8 ) && ( y <= tamanhoQuadrados + 8 ) ) {
        } else {
            if ( desenha ) {
                desenhaCirculo ( x, y, 5, corAtual );
            }
        }
    }

    tela.onmousedown = function ( evento ) {
        desenha = true;
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        if ( ( x >= xVermelho ) && ( x <= tamanhoQuadrados ) ) {
            corAtual = "red";
        } else if ( ( x >= xVerde ) && ( x <= tamanhoQuadrados * 2 ) ) {
            corAtual = "green";
        } else if ( ( x >= xAzul ) && ( x <= tamanhoQuadrados * 3 ) ) {
            corAtual = "blue";
        }
    }

    tela.onmouseup = function ( ) {
        desenha = false;
    }

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

</script>