Diseñando con el mouse - no sale

Hola Gianni, buenas tardes!

Está bastante bien el código, te comento lo que tendrías que modificar para que te funcione :)

1) Los condicionales de la función cambiarColor() están bien menos la última de cada uno

if ( (x > posicionRojoX ) && (x < posicionRojoX + 30) && (y > posicionRojoY) && (y < posicionRojoY + 30))    // el último debe ser (y < posicionRojoY + 30)

Fijate que el último dice: (y >** posicionRojoY + 30), en realidad tendría que ser al revés --> (y **< posicionRojoY + 30) Modificá el último "mayor que" por "menor que" en cada una de las condiciones de los colores

2) el return de los 3 colores no está cambiando el color. Reemplazá --> return pincelRojo directamente por pincel.fillStyle = "red"

pincel.fillStyle = "red"

Y hacé esto mismo con los otros dos colores:

pincelVerde modificalo por pincel.fillStyle = "green"

pincelAzul modificalo por pincel.fillStyle = "blue"

3) Por último, en la función dibujarCirculo() estás llamando a cambiarColor(). No llames esa función ahora, el cambio de color ya lo hiciste con la otra función, acá solamente dibujá. La función te quedaría así:

    function dibujarCirculo(evento) {
        if (puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
//          cambiarColor(); -> esta línea sacala, ya la llamamos antes. Ahora lo que hay que hacer es pintar
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }
    }

Debajo tu código pero con las correcciones que te mencioné. Podés copiar y pegarlo entero por si algo no se entendió.

Espero que haya sido de ayuda. Y te deseo muchos animos para continuar :)

<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 pincelRojo = pincel.fillStyle = "red"
    pincel.fillRect(0, 0, 30, 30);
    var posicionRojoX = 0; 
    var posicionRojoY = 0;

    var pincelVerde = pincel.fillStyle = "green";
    pincel.fillRect(30, 0, 30, 30);
    var posicionVerdeX = 30; 
    var posicionVerdeY = 0;

    var pincelAzul = pincel.fillStyle = "blue";
    pincel.fillRect(60, 0, 30, 30);
    var posicionAzulX = 60;
    var posicionAzulY = 0;

    var colores = ["red", "green", "blue"];

    var puedoDibujar = false;

    function cambiarColor(event) {
        var x = event.pageX - pantalla.offsetLeft;
        var y = event.pageY - pantalla.offsetTop;
        if((x > posicionRojoX ) && (x < posicionRojoX + 30) && (y > posicionRojoY) && (y < posicionRojoY + 30)){ // el último condicional estaba mal, no preguntes por > (mayor), sino por < (menor)
            alert("ROJO")
//            return pincelRojo -> este return no está cambiando el color, directamente cambiemos el color y listo =)
            pincel.fillStyle = "red"
        }else if((x > posicionVerdeX ) && (x < posicionVerdeX + 30) &&(y > posicionVerdeY)&&(y < posicionVerdeY + 30)){ // el último condicional estaba mal, no preguntes por > (mayor), sino por < (menor)
            alert("verde")
//            return pincelVerde -> este return no está cambiando el color, directamente cambiemos el color y listo =)
            pincel.fillStyle = "green"
        }else if((x > posicionAzulX ) && (x < posicionAzulX + 30) &&(y > posicionAzulY)&&(y < posicionAzulY + 30)){ // el último condicional estaba mal, no preguntes por > (mayor), sino por < (menor)
            alert("azul")
//            return pincelAzul -> este return no está cambiando el color, directamente cambiemos el color y listo =)
            pincel.fillStyle = "blue"
        }// los +30 son para ajustar la ubicacion del cuadrado
    }

    pantalla.onclick = cambiarColor;

    function dibujarCirculo(evento) {

        if (puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
//          cambiarColor(); -> esta línea sacala, ya la llamamos antes. Ahora lo que hay que hacer es pintar
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

</script>

ohHHHHH que genio.... gracias me funcionó.... así que lo hice bastante bien, el error de sintaxis va a estar siempre jaja

igualmente no comprendo porque el return de la variable no fuanciona

Me alegro que te haya funcionado =)

No te quiero mentir respecto al return. Pero esas funciones (como la de pantalla.onmousemove) tienen un comportamiento diferente. Viste que es por eso que llamas a la función cambiarColor sin los paréntesis. Normalmente uno haría: cambiarColor()

Quizás pueda venir por ahí la explicación. Pero bueno, ante nuestra ignorancia lo resolvemos de otra manera y listo jaja

Abrazo!