Agregue la funcion de borrado - Hector

index.html

@@ -31,8 +31,11 @@
         <option value="&">&</option>
         <option value="%">%</option>
     </select>
+    <button id="botonLimpiar">Limpiar</button>
     <input type="color" value="#000000" id="colorPicker">
-    <canvas id="lienzoCuadriculado" width="500" height="500"></canvas>
+    <canvas id="lienzoCuadriculado" width="500" height="500">
+        Tu navegador no admite el elemento &lt;canvas&gt;.
+    </canvas>
     <script>
         const colorPicker = document.getElementById("colorPicker");
         const lienzo = document.getElementById("lienzoCuadriculado");
@@ -87,6 +90,12 @@
                 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;