#EJERCICIO CANVAS DISENHANDO CON EL MOUSE | Alura Latam

Buenos dias!! Alguien me podrá guiar en mi código? , en especial en las funciones dinenharArea y selecionarColor Saludos.

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

<script>
    //DEF DEL CANVAS
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    //DEF DE VS Y F CIRCULO
    var puedoDibujar = false;

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

    function dibujarCirculo(x, y, colorInicial) { //se reemplaza a evento como parametro por x, y y color inicial
        if(puedoDibujar) {
            //var x = evento.pageX - pantalla.offsetLeft; NO SE UTLIZA POR Q SE REEMPLAZO EL PARAMETRO
            //var y = evento.pageY - pantalla.offsetTop; IDEN MOTIVO ANTERIOR
            //pincel.fillStyle = 'blue';
            pincel.fillStyle = colorInicial;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }
    }

    //pantalla.onmousemove = dibujarCirculo; SE REEMPLAZA ONMOUSEMOVE con otra f

    //DEF FS HB Y DESHABILITAR DIBBUJAR
    function habilitarDibujar() {
        puedoDibujar = true;
    }

    function deshabilitarDibujar() {
        puedoDibujar = false;
    }

    // DEF FS CUADRADOS
    function dibujarCuadrado(x,y,color) {
        pincel.fillStyle = color;//propiedad
        pincel.fillRect(x,y,50,50);//funcion
    }

    //DEF PALETA DE COLORES
    function dibujarPaletaColores() {
        dibujarCuadrado(0,0,"red");
        dibujarCuadrado(50,0,"green");
        dibujarCuadrado(100,0,"blue");
    }

    /*function dibujarPaletaColores() {
        colorInicial++;
        if (colorInicial >= colores.length) {
             colorInicial = 0; //vuelve para el primer color
        }
        return false; //menú contextual padrón de `canvas` no sea exhibido
    }*/


    //DEF LOGICA PINCEL
    //Función para delimitar el área
    function disenarArea(xCoordenada,yCoordenada) {
        if ((xCoordenada > 0 && yCoordenada > 0) && 
            (xCoordenada > 50 && yCoordenada > 0) &&
            (xCoordenada > 100 && yCoordenada > 0)) {
            return false;
        } else {
            return true;
        }
    }  

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

        if (disenarArea(x,y)){
                dibujarCirculo(x,y,colorInicial);
        }
    }

    function seleccionarColor(evento) {

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

        //Cada condición altera el color de la variable colorInicial

        //Comenzamos por la condición del eje Y que es común para todas
        if (xCoordenada > 0 && yCoordenada > 0) {

                colorActual = "red";
                console.log(colorActual);

            } else if (xCoordenada > 50 && yCoordenada > 0) {

                colorActual = "green";

            } else if (xCoordenada > 100 && yCoordenada > 0) {

                colorActual = "blue";
            }            
    }

    pantalla.onmousemove = capturarMovimientoDelMouse;

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    pantalla.onclick = seleccionarColor;

    dibujarPaletaColores();

</script>

Hola Laura,

Gracias por tu pregunta. Veo que estás trabajando en un ejercicio de dibujo en canvas utilizando el mouse. Me gustaría ayudarte con las funciones "dibujarArea" y "seleccionarColor".

En primer lugar, la función "dibujarArea" parece estar destinada a delimitar el área en la que se puede dibujar en el canvas. Sin embargo, hay un error en las condiciones de la función. En lugar de verificar si las coordenadas son mayores que cero, debes verificar si son menores que ciertos valores. Por ejemplo, en lugar de (xCoordenada > 0 && yCoordenada > 0), deberías tener (xCoordenada < 50 && yCoordenada < 50) para delimitar el área superior izquierda del canvas.

En cuanto a la función "seleccionarColor", parece que estás intentando cambiar el color inicial en función de las coordenadas del mouse. Sin embargo, hay un error en las variables que estás utilizando. En lugar de "xCoordenada" y "yCoordenada", deberías utilizar "x" e "y" respectivamente. Además, para cambiar el color inicial, debes asignar el valor del color correspondiente a la variable "colorInicial". Por ejemplo, en lugar de colorActual = "red", deberías tener colorInicial = "red".

Aquí tienes el código corregido:

function disenarArea(xCoordenada, yCoordenada) {
    if ((xCoordenada < 50 && yCoordenada < 50) && 
        (xCoordenada < 100 && yCoordenada < 50) &&
        (xCoordenada < 150 && yCoordenada < 50)) {
        return false;
    } else {
        return true;
    }
}

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

    if (disenarArea(x, y)) {
        if (x < 50 && y < 50) {
            colorInicial = "red";
        } else if (x < 100 && y < 50) {
            colorInicial = "green";
        } else if (x < 150 && y < 50) {
            colorInicial = "blue";
        }
    }
}

Espero que esto te ayude a resolver tu problema. Si tienes alguna otra pregunta, no dudes en preguntar. ¡Buena suerte con tu ejercicio de dibujo en canvas!

Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)