const colorPicker = document.getElementById("colorPicker");
        const lienzo = document.getElementById("lienzoCuadriculado");
        const contexto = lienzo.getContext("2d");
        const tamanoCuadricula = 20; // Tamaño de cada celda en píxeles
        let dibujando = false;
        const seleccionAscii = document.getElementById("seleccionAscii");
        
        // Mapa para almacenar los caracteres y sus colores
        const caracteresEnPosiciones = new Map();

        function dibujarCuadricula() {
            contexto.strokeStyle = "#ddd";
            for (let x = 0; x <= lienzo.width; x += tamanoCuadricula) {
                contexto.beginPath();
                contexto.moveTo(x, 0);
                contexto.lineTo(x, lienzo.height);
                contexto.stroke();
            }
            for (let y = 0; y <= lienzo.height; y += tamanoCuadricula) {
                contexto.beginPath();
                contexto.moveTo(0, y);
                contexto.lineTo(lienzo.width, y);
                contexto.stroke();
            }
        }

        function obtenerPosicionAjustada(posicion) {
            return Math.floor(posicion / tamanoCuadricula) * tamanoCuadricula;
        }

        function dibujarAscii(x, y) {
            const ascii = seleccionAscii.value;
            const color = colorPicker.value;
            const posicionClave = `${x},${y}`;
            const caracterInfo = caracteresEnPosiciones.get(posicionClave);

            // Solo dibuja si la celda está vacía o si el carácter o color es diferente
            if (!caracterInfo || caracterInfo.ascii !== ascii || caracterInfo.color !== color) {
                // Limpia la celda antes de dibujar
                contexto.clearRect(x, y, tamanoCuadricula, tamanoCuadricula);
                // Redibuja la línea de la cuadrícula para esa celda
                contexto.strokeStyle = "#ddd";
                contexto.strokeRect(x, y, tamanoCuadricula, tamanoCuadricula);
                
                // Dibuja el nuevo carácter con el color seleccionado
                contexto.font = `${tamanoCuadricula}px monospace`;
                contexto.fillStyle = color;
                contexto.fillText(ascii, x, y + tamanoCuadricula - 5);
                
                // Almacena el nuevo carácter y su color en el mapa
                caracteresEnPosiciones.set(posicionClave, { ascii, color });
            }
        }
        
        botonLimpiar.addEventListener("click", () => {
            contexto.clearRect(0, 0, lienzo.width, lienzo.height);
            caracteresEnPosiciones.clear();
            dibujarCuadricula();
        });

        lienzo.addEventListener("mousedown", (evento) => {
            dibujando = true;
            const x = obtenerPosicionAjustada(evento.offsetX);
            const y = obtenerPosicionAjustada(evento.offsetY);
            dibujarAscii(x, y);
        });

        lienzo.addEventListener("mousemove", (evento) => {
            if (dibujando) {
                const x = obtenerPosicionAjustada(evento.offsetX);
                const y = obtenerPosicionAjustada(evento.offsetY);
                dibujarAscii(x, y);
            }
        });

        lienzo.addEventListener("mouseup", () => {
            dibujando = false;
        });

        dibujarCuadricula();