diff --git a/.README.md.swp b/.README.md.swp
new file mode 100644
index 0000000..cd747ed
Binary files /dev/null and b/.README.md.swp differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d33f75e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Canvas Cuadriculado con Pincel ASCII</title>
+ <style>
+ body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #f4f4f4;
+ flex-direction: column;
+ }
+ canvas {
+ border: 1px solid black;
+ background-color: white;
+ cursor: crosshair;
+ }
+ select {
+ margin-bottom: 10px;
+ }
+ </style>
+</head>
+<body>
+ <select id="seleccionAscii">
+ <option value="*">*</option>
+ <option value="#">#</option>
+ <option value="@">@</option>
+ <option value="&">&</option>
+ <option value="%">%</option>
+ </select>
+ <input type="color" value="#000000" id="colorPicker">
+ <canvas id="lienzoCuadriculado" width="500" height="500"></canvas>
+ <script>
+ 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
+ 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 posicionClave = `${x},${y}`;
+ const caracterActual = caracteresEnPosiciones.get(posicionClave);
+
+ // Solo dibuja si la celda está vacía o si el carácter es diferente
+ if (!caracterActual || caracterActual !== ascii) {
+ // 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
+ contexto.font = `${tamanoCuadricula}px monospace`;
+ contexto.fillText(ascii, x, y + tamanoCuadricula - 5);
+
+ // Almacena el nuevo carácter en el mapa
+ caracteresEnPosiciones.set(posicionClave, ascii);
+ }
+ }
+
+ 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();
+ </script>
+</body>
+</html>
\ No newline at end of file