Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Duda] Paleta de colores

Buenas a quien pueda ayudarme, siento que me complique demasiado haciendo el codigo, de igual manera no logre hacer que no dibuje en el area de la paleta de colores, si lo pongo en 50 , como el circulo tiene 5pixeles de radio dibujar sobre ella, la unica solucion que encontre fue ponerlo en 55

De igual manera hice que solo con el click izquierdo se pueda dibujar y que con el derecho se reinicie el canvas para dibujar de nuevo

Acepto comentarios, soluciones o ayuda en general de como mejorar mi codigo y si me ayudan a corregir lo de la paleta de colores estaria perfecto

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

<script>
    const screen = document.querySelector('canvas');
    const brush = screen.getContext('2d');

    brush.fillStyle = "lightgray";
    brush.fillRect(0, 0, 600, 400);

    let canDraw = false;
    let y = 0
    let currentColor = "blue"

    function drawSquare(x, y, color) {
        let screen = document.querySelector("canvas");
        let brush = screen.getContext("2d");
        brush.fillStyle = color;
        brush.fillRect(x, y, 50, 50);
        brush.strokeStyle = "black";
        brush.strokeRect(x, y, 50, 50);
    }


    function drawCircle(event) {
        if (canDraw) {
            let x = event.pageX - screen.offsetLeft;
            let y = event.pageY - screen.offsetTop;
            if (x > 600 || y > 55) {
                brush.fillStyle = currentColor;
                brush.beginPath();
                brush.arc(x, y, 5, 0, 2 * 3.14);
                brush.fill();
            }
        }
    }

    function colorPalette() {
        const colors = [
            "black",
            "red",
            "green",
            "blue",
            "yellow",
            "orange",
            "purple",
            "pink",
            "white",
            "brown",
            "turquoise",
            "gold"
        ];

        let x = 0;
        colors.forEach((color) => {
            drawSquare(x, y, color);
            x += 50;
        });
        screen.addEventListener("click", function (event) {
            let x = event.pageX - screen.offsetLeft;
            let y = event.pageY - screen.offsetTop;
            if (y < 50) {
                let colorIndex = Math.floor(x / 50);
                currentColor = colors[colorIndex];
            }
        });
    }

    colorPalette();
    screen.onmousemove = drawCircle;

    function enableDrawing() {
        if (event.button === 0) {
            canDraw = true;
        }
    }

    function disableDrawing() {
        canDraw = false;
    }

    screen.onmousedown = enableDrawing;

    screen.onmouseup = disableDrawing;

    function clearScreen() {
        brush.clearRect(0, 50, 600, 400);
    }

    function refresh() {
        clearScreen();
        brush.fillStyle = "lightgray";
        brush.fillRect(0, 0, 600, 400);
        colorPalette();
        event.preventDefault();
    }

    screen.oncontextmenu = refresh;

</script>
1 respuesta

Que excelente, tome tu diseño para informarme más en relación a ello, gracias por compartir.