<!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 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 });
}
}
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>