[Duda] No logro Hacer que funcione el cambio de color

Hola Bianca, espero te sirva lo siguiente:)) Note algunas cosas en tu codigo:

• En el metodo dibujarCirculo(), creo que si x = 100 entonces vendria y entraria en el primer if ya que 100 > 0 y el color seria rojo luego entraria en el ultimo if ya que 100 < 150 con lo cual el color seria azul sin embargo if seguido de un else no existe tal estructura, la sintaxis correcta es:

  if(condicion){
  
                //CODIGO A EJECTUTAR SI LA CONDICION SE CUMPLE.
  }else if(condicion2){
  
                //CODIGO A EJECUTAR EN CASO DE QUE CONDICION NO SE CUMPLA Y CONDICION2 SE CUMPLA.
  }

  o bien:

if(condicion){
                //CODIGO A EJECTUTAR SI LA CONDICION SE CUMPLE.
 }else{
                //CODIGO A EJECUTAR YA QUE LA CONDICION NO SE CUMPLIO.
}

• El cambio de color esta en el metodo dibujarCirculo el cual es llamado cada vez que el mouse pasa sobre la canva (el rectangulo de 600 x 400 color gris), por lo cual x,y cambiaran de un instante a otro, lo correcto sería a mi parecer aplicar esos condicionales cuando el usuario haga click sobre alguno de los colores de la paleta y eso se logra detectar con el evento onmousedown.

• Tambien te faltaria hacer que el usuario no pueda dibujar sobre la paleta de colores.

• La variable colorCirculo = color (color no existe, no está definida) un elemento no puede ser igual a algo que no existe.

A continuacion el codigo que es funcional, quizas le falte eficiencia pero cumple con lo solicitado:

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

    function dibujarCuadrado(x,y,color) {
        pincel.fillStyle = color;
        pincel.fillRect(x,y,50,50)
    }

    function disenharCircunferencia(x,y,r,color){
        pincel.fillStyle = color;

        pincel.beginPath();

        pincel.arc(x,y,radio,0,2*Math.PI);

        pincel.fill();

    }

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

    var puedoDibujar = false;
    var colorCirculo = "blue";//que sea azul por defecto
    var radio = 10;

    function dibujarCirculo(evento) {

        var posX = evento.pageX - pantalla.offsetLeft;
        var posY = evento.pageY - pantalla.offsetTop;

        if((posX<=150+radio) && (posY<=50+radio)){
            /*el radio se suma para evitar que la mitad del circulo pueda 
            estar en la paleta de colores*/
            puedoDibujar = false;            
        }


        if(puedoDibujar) {

            disenharCircunferencia(posX, posY, radio, colorCirculo);

        }
    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar(e) {

        //Vamos a tomar las coordenadas en las que el usuario ha hecho click

        var x = e.pageX - pantalla.offsetLeft;

        var y = e.pageY - pantalla.offsetTop;

        puedoDibujar = true; 

        /*si la posicion en y ocupa menos que 50 (0 es donde inicia mas 50 de altura)
        entonces que valore las demas condiciones*/
        if(y>=0 && y<=50){

        //Este if tiene tres condiciones por lo cual si una se cumple no entrara en las siguientes

            if(x>=0 && x<=50){
                /*el primer rectangulo empieza en 0 y termina en 50 ya que ese es el resultado
                de sumar 0 + su ancho*/

                colorCirculo = "red";

                //en la siguiente condicion ya no se incluye al 50 ya que esta incluida en la primera
            }else if(x > 50 && x<=100){
                colorCirculo = "green";
            }else if(x > 100 && x<=150){
                colorCirculo = "blue";
            }
        }


    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

</script>