HELP: S.O.S. NO ME CAMBIA DE COLOR

Tambien lo estoy intentando, pero no me sale, con una creacion de objeto y onclic en pantalla.

Hola Elena como estas? te corregí la función "seleccionarColor(x,y)" ------> "seleccionarColor(evento)" pasando "evento" a la función como parámetro ("evento" proporciona las posiciones "x e y" actualizadas del ratón) y volví a llamar a las variables que habías creado en la función "dibujarCirculo" ("x" e "y") . Dentro del if tenias mal las condiciones, tenes que separar cada condición con paréntesis, no es lo mismo "0 < X < 50" ("X" es un numero mayor a 0 y menor a 50) que decir "(x > 0) y (x < 50)" ("X" tiene que ser mayor a 0 y "X" tiene que ser menor a 50) . También te modifique el uso del clic derecho por el izquierdo, ya que por lo general, el derecho se utiliza para menús contextuales y no para seleccionar o presionar o activar cosas ( Se que en un ejercicio usaron el clic derecho para cambiar los colores, pero eso era porque visualmente no había ningún objeto al cual poder hacerle clic, y había que explicar también como usar el clic derecho). Ahora te quedaría establecer limites de pintado... y creo que eso ya seria todo :]

Te adjunto las secciones de codigo que modifique para poder realizar el cambio de colores:

pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);

//TABLERO DE COLORES

pincel.fillStyle = "blue";
pincel.fillRect(0, 0, 50, 50);

pincel.fillStyle = "red";
pincel.fillRect(50, 0, 50, 50);

pincel.fillStyle = "green";
pincel.fillRect(100, 0, 50, 50);


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

    if ((x > 0)
        &&
        (x < 50)
        &&
        (y > 0)
        &&
        (y < 50)) {
        indiceColorActual = 0;
    } else if ((x > 50)
        &&
        (x < 100)
        &&
        (y > 0)
        &&
        (y < 50)) {
        indiceColorActual = 1;
    } else if ((x > 100)
        &&
        (x < 150)
        &&
        (y > 0)
        &&
        (y < 50)) {
        indiceColorActual = 2;
    }
    console.log(x, y);

}

pantalla.onclick = seleccionarColor;

No te olvides de marcarme como "solución" si te fue util mi respuesta :] que andes bien, saludos!!

Hola Martin, agradecida por tu apoyo. A continuación te muestro el código como quedó, de acuerdo a los cambios que sugieres

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

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');
    var colores = ["blue", "red", "green"];
    var indiceColorActual = 0; // comienza con blueç
    var x = 0
    var y = 0


    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle = "red";
    pincel.fillRect(0,0,50,50);
    //dividimos el recuedro en tres colores diferentes
    pincel.fillStyle = "green";
    pincel.fillRect(50,0,50,50);
    pincel.fillStyle = "blue";
    pincel.fillRect(100,0,50,50);
    //En la posicion x=100, has un cuadro de x (ancho, 50)
    //pincel.fillStyle = "grey";
    //pincel.fillRect(150,0,600,50);

    function seleccionarColor(evento) {

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

        if ((x > 0)
            &&
            (x < 50)
            &&
            (y > 0)
            &&
            (y < 50)) {
           indiceColorActual = 1;
       } else   if ((x > 50)
                &&
                (x < 100)
                &&
                (y > 0)
                &&
                (y < 50)) {
                indiceColorActual = 2;
       } else   if ((x > 100)
                &&
                (x < 150)
                &&
                (y > 0)
                &&
                (y < 50)) {
                indiceColorActual = 0;
        }
        console.log(x,y);

    //return false; //menú contextual padrón de `canvas` no sea exhibido
    }

    //pantalla.oncontextmenu = seleccionarColor;
    pantalla.onclick = seleccionarColor;



    var puedoDibujar = false;

    function dibujarCirculo(evento) {

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


        }

        pincel.fillStyle = colores[indiceColorActual];
        pincel.beginPath();
        pincel.arc(x, y, 5, 0, 2 * 3.14);
        pincel.fill();
        //indiceColorActual = 0

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

</script> 

Te comento, tienes razón en cuanto a las observaciones "TABLERO DE COLORES", el cual se refiere a (posición inicial X, posición inicial y, ancho y alto). Luego en cuanto a los condicionales, realmente desconocía que no significaban lo mismo., sin embargo no entendí el cambio de (x,y) por (evento) en la función seleccionarColor. Y si falta deliminar que no pinte sobre la paleta de colores. Gracias infinitas!!!

El tema de los eventos en JavaScript los vas a ver con mas detalle mas adelante, de mientras recordemos un par de cosas del curso:

Cuando yo hago un llamado a la función de esta manera :

/*Paso un valor a la función como parámetro, en este caso 
"HOLA", mi función recibe dicho parámetro, y lo guarda en 
una nueva variable local bajo el nombre que yo le asigne 
("frase").*/

function saludar(frase) {

    document.write(frase);

}

saludar("HOLA");

La misma pasa a ser ejecutada al instante de manera automática. Tu función "function seleccionarColor(x,y)" esta creando 2 variables locales a la espera de ser usadas dentro de la función, las cuales no están recibiendo ningún tipo de valor, ya que, durante el llamado a la función, vos no estas pasando dichos valores :

pantalla.onclick = seleccionarColor; /* Esta es la manera 
correcta de plantear la llamada a la función mediante el 
uso del clic izquierdo, pero no te permite a vos usar
las variables "x" e "y" declaradas con anterioridad 
como parámetros de la función.*/

pantalla.onclick = seleccionarColor(x,y); /*Si yo hago 
esto, la misma ejecuta la función de manera automática,
Se le proporcionan a la función los valores obtenidos del
evento de movimiento del mouse 
"pantalla.onmousemove = dibujarCirculo;" ( al ejecutarse 
 al instante solo va a recibir "x=0" e "y=0"), e 
 imposibilita su uso nuevamente una vez finalizada
 su ejecución. NO es la idea, si no mas bien, que el evento 
".onclick" o "la acción de pulsar en algo con el mouse 
" llame a la función en ese momento*/

Conclusión: Por el momento, tu función solo puede recibir los valores proporcionados por el evento ".onclick" como parámetro(Para lo que se busca hacer ahora es mas que suficiente, pero como te dije al principio, mas adelante vas a ver como solventar estas cuestiones)

evento.pageX = Retorna la coordenada horizontal del evento.

evento.pageY = Retorna la coordenada vertical del evento.

Estos valores extraídos del evento son los que vos guardas en variables llamadas "x" e "y", que vas a usar después para las comparaciones dentro del if. Podes usar esas variables por fuera de la función para "x" cosas (Depende como declares tus variables. MIrar diferencias entre "var" "let" "const"), pero no para reutilizarlas en otros eventos declarados de esa manera por lo anterior mencionado. Es por esto que se pone "evento" como parametro y no las variables "x" e "y" anteriormente declaradas.

estos y otros valores los podes ver haciendo un console.log de "evento".

Buenos dias,Matias!!! Clase Magistral!!! Te botaste!!! Gracias!!! Ahora vamos con lo que falta delimitar el área, te comento que he hecho varias pruebas. Prueba 1: Incorporar a la función dibujarCirculo, el área donde si esta permitido dibujar.

function dibujarCirculo(evento) {


        if((puedoDibujar)
            &&
            (x > 150)
            &&
            (x < 600)
            &&
            (y > 50)
            &&
            (y < 400)) {

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

        }

        pincel.fillStyle = colores[indiceColorActual];
        pincel.beginPath();
        pincel.arc(x, y, 5, 0, 2 * 3.14);
        pincel.fill();
        //indiceColorActual = 0

    }

    pantalla.onmousemove = dibujarCirculo;

Prueba 2: Incorporar a la función habiliarDibujar, la condición de que no este habilitado para dibujar en el área no permitida

function habilitarDibujar() {


        if((x > 0)
            &&
            (x < 150)
            &&
            (y > 0)
            &&
            (y < 50)){ 

            puedoDibujar = false;

        } else puedoDibujar = true;
    }

    pantalla.onmousedown = habilitarDibujar;

Prueba 3. Incorporar una función adicional deshabilitarArea

 function deshabilitarArea(x,y) {

            if((x > 0)
            &&
            (x < 150)
            &&
            (y > 0)
            &&
            (y < 50)){ 
                return false;

        } else { 
            return true;
        }  

    }

Y ninguna de las tres opciones hace lo que quiero. Por favor puedes revisar, a ver que estoy haciendo de manera inadecuada. Que te parece el razonamiento lógico de cada caso? Adicionalmente, la instrucciones estan planteadas de manera inadecuada? Por favor, si consideras que debo revisar algún tema de razonamiento lógico o de programación básica, no dudes en hacérmelo saber. Gracias!

Perdon por la tardanza, estuve sin luz todo el dia D: !

Voy a tomar tu primer caso ya que es el mas cercano a la solución :D

Primer que nada vamos a corregir esta porción de código :

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

Estas variables contienen los datos proporcionados por el evento ".onclick" que habíamos comentado anteriormente. Necesitas de dichas variables para tus condicionales en el if. No pueden ser el código que se va a ejecutar si se cumple tu condición, ya que si no, no tendrías contra que comparar los casos antes:

   if((puedoDibujar)
            &&
            (x > 150)
            ...
            (y < 400)) {
            var x = evento.pageX - pantalla.offsetLeft; 
            var y = evento.pageY - pantalla.offsetTop;
            }

Esto así como esta dice lo siguiente :

1_ "puedoDibujar" contiene el valor true?

resultado:

SI, ya que al pintar este siempre va a ser "verdadero".

2_ "X" es mayor a 150?

resultado:

No, X actualmente vale 0. (console.log(x) para visualizar)

1na sola condición que no se cumpla basta para romper/invalidar la ejecución.

Ahora seguimos con la siguiente porción de código :

 pincel.fillStyle = colores[indiceColorActual];
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();

Esta porción de código es la que deberia estar dentro del if. Mientras que dentro no se va a ejecutar, por fuera también va a sufrir del mismo problema, solo se podrá pintar en el X = 0 e Y = 0 ( Un tanto complicado de acertar a esa posición jajajaj)

El código debe quedar de la siguiente manera :

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

    if ((puedoDibujar)&&(x > 0) .......................

Ahora nos queda corregir los limites de pintado :

Primero tengamos en claro algo, nuestro tablero de colores solo dispone de 3 objetos(Ocupa un total de 150 px en el eje X del canvas) aun así, eso no quiere decir que podremos pintar sobre el espacio que sobra alrededor de este (coordenadas X = 150 Y = 0, donde Y = 0 es fijo , en adelante) ya que todo ese espacio sobrante se va a ocupar para el tablero de colores en si.

Tus condiciones:

(x > 150) // Esto limita al pincel a pintar por encima de 150px en el eje X.

(x < 600)// Esto limita al pincel a pintar por debajo de 600px en el eje X.

(y > 50)// Esto limita al pincel a pintar por encima de 50px en el eje Y

(y < 400)// Esto limita al pincel a pintar por debajo de 400px en el eje Y

RESULTADO :

Quedamos en que en las coordenadas X = 0 e Y = 0 ("Y" se mantiene con valor fijo) en adelante no se puede pintar, por que ahí esta situado nuestro tablero de colores no? pero en las coordenadas X = 0 e Y = 50("Y" se mantiene fijo) en adelante? BINGO!

Limitando el pincel por encima de 50px en adelante en el EJE "Y" es suficiente para crear esta limitación y tener un recuadro completo en donde poder pintar. Por ende, la limitación del eje "X" tiene que ser de "0" en adelante, ya que no tenemos ningún objeto por debajo de 50px en el eje "Y" que nos este estorbando :

RESULTADO :

Pero aun lo podemos hacer mas preciso y también nos ahorramos algunos comportamientos extraños:

(x > 5) // Esto limita al pincel a pintar por encima de 5px en el eje X.

(x < 595)// Esto limita al pincel a pintar por debajo de 595px en el eje X.

(y > 55)// Esto limita al pincel a pintar por encima de 55px en el eje Y

(y < 395)// Esto limita al pincel a pintar por debajo de 395px en el eje Y

Restando 5px del lado derecho y sumando 5px al lado izquierdo, y lo mismo para arriba y abajo, eliminamos el pintar sobre los bordes del canvas y lo dejamos mas prolijo.

Ahora solo nos queda hacer que se cumplan las limitancias impuestas :

... }else {
            puedoDibujar = false;  

y listo :D

Aca el código completo :

   function dibujarCirculo(evento) {


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

    if ((puedoDibujar)
            &&
            (x > 5)
            &&
            (x < 595)
            &&
            (y > 55)
            &&
            (y < 395)){

            pincel.fillStyle = colores[indiceColorActual];
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();

        }else {
            puedoDibujar = false;
        }
    }

NOTA : CASI 5000 PALABRAS !

Reiniciar

le cree otras funciones como ver el color sellecionado y resetear la pantalla

Genial!! Gracias a todos!!!!