Se agregó la funcionalidad del cambio de color de carácteres

README.md

@@ -1,3 +1,5 @@
 # ASCII_Proyecto
 
-Un proyecto de dibujos ASCII
+Un proyecto de dibujos ASCII 
+
+Este es el primer cambio del archivo README.md

index.html

@@ -34,13 +34,14 @@
     <input type="color" value="#000000" id="colorPicker">
     <canvas id="lienzoCuadriculado" width="500" height="500"></canvas>
     <script>
+        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 dibujados
+        // Mapa para almacenar los caracteres y sus colores
         const caracteresEnPosiciones = new Map();
 
         function dibujarCuadricula() {
@@ -65,23 +66,25 @@
 
         function dibujarAscii(x, y) {
             const ascii = seleccionAscii.value;
+            const color = colorPicker.value;
             const posicionClave = `${x},${y}`;
-            const caracterActual = caracteresEnPosiciones.get(posicionClave);
+            const caracterInfo = caracteresEnPosiciones.get(posicionClave);
 
-            // Solo dibuja si la celda está vacía o si el carácter es diferente
+            // Solo dibuja si la celda está vacía o si el carácter o color es diferente
-            if (!caracterActual || caracterActual !== ascii) {
+            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
+                // 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 en el mapa
+                // Almacena el nuevo carácter y su color en el mapa
-                caracteresEnPosiciones.set(posicionClave, ascii);
+                caracteresEnPosiciones.set(posicionClave, { ascii, color });
             }
         }