Dejo mi solución, acepto comentarios para optimizarlo más.

En lo personal me demore mucho y me costo mucho resolver este ejercicio, lograba hacer los cambios de colores al llamar la función correspondiente pero no lograba en lazarlo con los cuadrados, hasta que revise el foro entendi como debi hacer esa parte, pero adapte lo que vi a la logica que yo mismo habia aplicado, el programa funciona como se solicita, acepto retroalimentaciones o formas de mejorar. Gracias.

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

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

    var blue = true;
    var red = false;
    var gre = false;
    var x;
    var y;

    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 puedoDibujar = false;


    function dibujarCirculo(evento) {

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

            if (blue){
                pincel.fillStyle = 'blue';
                pincel.beginPath();
                pincel.arc(x, y, 5, 0, 2 * 3.14);
                pincel.fill();
            } 
            if (red) {
                pincel.fillStyle = 'red';
                pincel.beginPath();
                pincel.arc(x, y, 5, 0, 2 * 3.14);
                pincel.fill();
            }
            if (gre) {
                pincel.fillStyle = 'green';
                pincel.beginPath();
                pincel.arc(x, y, 5, 0, 2 * 3.14);
                pincel.fill();
            }
        }

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    function cambiarRojo() {
        red = true;
        blue = false;
        gre = false;
    }
    function cambiarAzul() {
        blue = true;
        red = false;
        gre = false;
    }
    function cambiarVerde() {
        gre = true;
        red = false;
        blue = false;
    }

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

        if ((x > 0 && x < 50) && (y > 0 && y < 50)) {
            cambiarRojo();
        }
        if ((x > 50 && x < 100) && (y > 0 && y < 50)) {
            cambiarVerde();        }
        if ((x > 100 && x < 150) && (y > 0 && y < 50)) {
            cambiarAzul();
        } 
    }


    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    pantalla.onclick = seleccionarColor;


</script>