Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

Me hizo pensar pero asi se logro

<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 puedoDibujar = false;
    var colores=["red","green","blue"];
    var color="blue";

    function paleta(colores){

        for(var i =0;i<colores.length;i++){
            pincel.fillStyle=colores[i];
            pincel.fillRect(i*50,0, 50, 50);
            pincel.strokeStyle="black";
            pincel.strokeRect(i*50,0, 50, 50);

            }
    }
    paleta(colores);

    function cambiarColor(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if (x<50 && x>0 && y<50 && y>0){
            color=colores[0];
        }
        if (x<100 && x>50 && y<50 && y>0){
            color=colores[1];
        }
        if (x<150 && x>100 && y<50 && y>0){
            color=colores[2];   
        }


    }

    function dibujarCirculo(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if(x<150&&x>0&&y<50&&y>0){
            deshabilitarDibujar()            
        }

        if(puedoDibujar) {

            pincel.fillStyle = color;
            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.onclick=cambiarColor;
    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

</script>
2 respuestas

Saludos compañero, noté que si mantienes presionado el click y pasas por la paleta de colores deja de diseñar círculos. Me gusto el borde negro de la paleta de colores like por eso :)

Saludos Sebastián, yo también me rompí un poco la cabeza pensando, pero lo logré reutilizando algunos códigos de otros ejercicios previos con mi propia lógica, también le agregué dos botones adicionales que son "borrar", para cuando pases el mouse por encima de algo dibujado, este borre el color que ya tienes ahí, y el otro fue el botón "Limpiar Pantalla", para borrar todo lo que esté en el canvas, excepto el color de fondo del canvas, la paleta de colores y los botones ya creados.

Si les interesa ver el código me avisan, de todos modos lo publicaré aquí en el foro.