ayudaa...no respeta el area de la paleta

<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);

    var puedoDibujar = false;
    var areaHabilitada = false;
    var colores = ["blue", "red", "green"];        
    var indiceColorActual = 0; // comienza con blue

    function dibujarCirculo(evento) {

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

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar(evento) {


             puedoDibujar = true;


    }

    function deshabilitarDibujar() {



            puedoDibujar = false;

    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;


    var base = 50
    var altura = 50

    // paleta roja
    pincel.fillStyle = 'red';
    pincel.fillRect(0, 0, base, altura);


    // paleta verde
    pincel.fillStyle = 'green';
    pincel.fillRect(50, 0, base,altura);

    // paleta azul
    pincel.fillStyle = 'blue';
    pincel.fillRect(100, 0, base, altura);


        // habilitar el area del cuadrado paleta para seleccionar color

    function selecionarColor(evento){

        var cuadroX=evento.pageX - pantalla.offsetLeft;
        var cuadroY=evento.pageY - pantalla.offsetTop;

        if(
            (cuadroX < 0 + base)&&
            /*(x > 0 - base)&&*/
            (cuadroY < 0 + altura)
            /*&&(y > 0 - altura)*/)
            {
            alert(" selecciono color rojo");
            indiceColorActual=colores[1];

        }


        else if(
            (cuadroX < 50 + base)&&
            /*(x > 0 - base)&&*/
            (cuadroY < 50 + altura)
            /*&&(y > 0 - altura)*/)
            {
            alert(" selecciono color verde");
            indiceColorActual=colores[2];

        }


        else if(
            (cuadroX < 100 + base)&&
            /*(x > 0 - base)&&*/
            (cuadroY < 100+ altura)
            /*&&(y > 0 - altura)*/)
            {
            alert(" selecciono color azul");
            indiceColorActual=colores[0];

        }

    }


    pantalla.onclick =selecionarColor;


   /* function limpiarPantalla() {      

        pincel.clearRect(50,100,550,300);  // Se usa para borrar el canvas 
        indiceColorActual=colores[2];
    }*/    

    function HabilitarArea(evento){    

        var areaX=evento.pageX - pantalla.offsetLeft;
        var areaY=evento.pageY - pantalla.offsetTop;



        if( (areaX >= 0) && (areaX < 150 )&&
            (areaY > 0) && (areaY < 50 )){

            areaHabilitada= false;

        }

        else {
                areaHabilitada  = true;
        } 

    }    



    //pantalla.oncontextmenu = limpiarPantalla;

</script>   

Hola, yo lo que hice fue crear una función nueva la cual evalua la posición de x y y, y si esta está dentro de el área de la paleta simplemente no dibuja, te muestro el código para que te guíes, espero te sirva de ayuda

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

<script>
  var pantalla = document.querySelector("canvas");
  var pincel = pantalla.getContext("2d");
  var x;
  var y;
  var color = "blue";
  var puedoDibujar = false;

  function dibujarRectángulo(xi,yi,w,h,color){
    pincel.fillStyle = color;
    pincel.fillRect(xi,yi,w,h);
  }

  function restringirzona(x,y){
    if((x>=0)&&(x<=155)&&(y=>0)&&(y<=55)){
      puedoDibujar = false;
    }else{
      puedoDibujar = true;
    }
  }

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

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

      restringirzona(x,y);

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

  }

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

    restringirzona(x,y);

  }

  function deshabilitarDibujar(){
    puedoDibujar = false;
  }

  dibujarRectángulo(0,0,600,400,"grey");
  dibujarRectángulo(0,0,50,50,"red");
  dibujarRectángulo(50,0,50,50,"green");
  dibujarRectángulo(100,0,50,50,"blue");

  pantalla.onmousemove = dibujarCirculo; //.onmousemove permite capturar el movimiento del mouse
  pantalla.onmousedown = habilitarDibujar; //.onmousedown permite ejecutar un codgio cuando el mouse está presionado
  pantalla.onmouseup = deshabilitarDibujar; // .onmouseuop permite ejeuctar un codigo cuando el mouse es soltado
  pantalla.onclick = cambiarColor;


</script>

Genial tu respuesta, me ayudo porque el código del profesor no me corria bien, pero cuando hice la implementación de la parte tuya funcionó OK