Así lo entendí

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

<script>
    var pantalla = document.querySelector("canvas");   /// Pantalla 
    var pincel = pantalla.getContext("2d");    
    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0,0,600,400); 

    var t =50;


    function dibujarCuadrado(x,y,T,color){      /// Diduja cuadrado


    pincel.fillStyle = color; 
    pincel.fillRect(x,y,50,50);
    pincel.strokeStyle = "black"; 
    pincel.strokeRect(x,y,50,50);


    }

    dibujarCuadrado(0,0,t,"red");     
    dibujarCuadrado(50,0,t,"green");
    dibujarCuadrado(100,0,t, "blue");   



    var puedoDibujar = false;                  
    var color = "blue"; // inicial color 


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

        if ((x < t)&& (y < t)) {
            color = "red";
            }

        if ((x > t && y < t)&&(x < (t+50) && y < t)) {

            color = "green";

             }

        if ((x > (t+50) && y < t)&&(x <(t+100) && y < t)) {

            color = "blue";

             }


        }



 function dibujarCirculo(evento) {

        if(puedoDibujar) {


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


            pincel.fillStyle = color;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();


        }

    }



    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onclick = seleccionarColor;      /// llamar las funcion
    pantalla.onmousemove = dibujarCirculo;
    pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;

</script>