duda, la paleta de colores se pinta

Buena tarde para todos.

Quisiera que me guiaran sobre una duda que tengo. Ya pude hacer los cuadrados y seleccionar el color cuando se da clic en cada uno. Pero no he podido hacer que los cuadros de cada color no se pinten cuando le doy clic para cambiar de color.

Agradezco su ayuda.

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

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);
    pincel.fillStyle = 'red';
    pincel.fillRect(0, 0, 50, 50);
    pincel.fillStyle = 'green';
    pincel.fillRect(50, 0, 50, 50);
    pincel.fillStyle = 'blue';
    pincel.fillRect(100, 0, 50, 50);

    //var colores = ["red", "green", "blue"]
    var puedoDibujar = false;
    var colorActual = "blue";

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

        if((x<50) && (x>0) && (y<50) && (y>0)){
            colorActual = "red";   
        }else if((x<100) && (x>50) && (y<50) && (y>0)){
            colorActual = "green";   
        }else if((x<150) && (x>100) && (y<50) && (y>0)){
            colorActual = "blue";    
        }


    }
    pantalla.onclick = seleccionarColor;

    function dibujarCirculo(evento) {

        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = colorActual;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

</script>