[Sugerencia] Diseño con el mouse (Estilo sencillo y corto)

Juan Carlos, está genial! Me estuve rompiendo la cabeza estos últimos 2 días con este ejercicio. Logré una solución alternativa a la del profe y me puse contenta. Hasta me sentía una "hacker".

Hasta que vi que tu código tenían tan solo 55 líneas de código contra el mío que tiene 115. Me deprimí y volví a la realidad! jajaja!

Felicitaciones otra vez por tu código. Comparto el mío para enaltecer más el tuyo!

Saludos, Alejandra.

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');

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

    var puedoDibujar = false;

    //Función para dibujar círculo
    function dibujarCirculo(evento) {

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

    //Funciones para habilitar y deshabilitar dibujar
    function habilitarDibujar() {
        puedoDibujar = true;
    }

    function deshabilitarDibujar() {
        puedoDibujar = false;
    }

    //Crear cuadrados de 50x 50 de la paleta
    function dibujarRectangulo(x, y, base, altura, color) {
        var pantalla = document.querySelector("canvas"); //conecto con la etiqueta canvas
        var pincel = pantalla.getContext("2d"); //para que traiga todo el contenido de la pantalla
        pincel.fillStyle = color;
        pincel.fillRect(x, y, base, altura);
    }

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


    //Defino las variables x e y de donde terminan cada uno de los colores.
    var xRojo = 50;
    var yRojo = 50;
    var xVerde = 100;
    var yVerde = 50;
    var xAzul = 150;
    var yAzul = 50;

    //Función para evitar que dibuje en zona paleta de colores.
        //Funcion para capturar movimiento del mouse
    function capturarMovMouse(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

        if (puedoDisenhar(x, y)) {
            dibujarCirculo(evento);
        }
    }

        //Función para habilitar el dibujo en la zona permitida.
    function puedoDisenhar(x, y) {

        if ((x >= 150 + 5) && (x <= 600) ||
            (y >= 50 + 5) && (y <= 400)) {
            return true;
        } else {
            return false;
        }
    }

    //Función para captar color de la paleta: si hago click en el area roja, la variable color cambia a "red" y así sucesivamente.

    function elijoColor(evento) {

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

        if ((x < xRojo) && (y < yRojo)) {
            console.log(x, y, "Rojo");
            color = "red";
        }

        if ((x < xVerde) && (x > xRojo) &&
            (y < yVerde)) {
            console.log(x, y, "Verde");
            color = "green";
        }

        if ((x < xAzul) && (x > xVerde) &&
            (y < yAzul)) {
            console.log(x, y, "Azul");
            color = "blue";
        }
    }

    //Llamado a las funciones
    pantalla.onclick = elijoColor;

    pantalla.onmousemove = capturarMovMouse;

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;


</script>

Increible bro, felicidades. Yo la verdad fui incapaz de realizar eso.

¡Saludos alejandra! Acabo de revisar su codigo y honestamente el suyo esta excelente! ¡Me encanto su codigo esta bien estructurado! El suyo sigue siendo un gran avance, No se desanime por su codigo de 114 lineas, sigue siendo hecho por usted y eso es un avance ¡Espero logremos avanzar como programadores!

Su código es increíble, es muy sencillo de entender, muchas gracias por compartir el conocimiento.