BLOG
Cómo funciona OtilinoDraw por dentro.
OtilinoDraw es la pizarra de dibujo de este sitio. Este artículo explica, sin entrar en el código, cómo está construida y qué decisiones técnicas se tomaron.
Un lienzo en el navegador
La pizarra usa el elemento canvas de HTML. Cada trazo se guarda como un objeto con sus puntos, su color y su grosor, y no como una imagen. Gracias a eso se puede deshacer, mover, cambiar de tamaño y volver a dibujar a cualquier nivel de zoom sin perder calidad.
Al acercar o alejar la vista no se reescala una imagen: se vuelven a dibujar los trazos con el nuevo zoom.
Guardado en tu dispositivo
En modo individual, la pizarra se guarda en el propio navegador mediante IndexedDB. Nada se envía a ningún servidor. La contrapartida es que el dibujo vive en ese navegador y ese dispositivo: si borras los datos del sitio, desaparece. Por eso existe la opción de descargar la pizarra como imagen.
Salas en tiempo real
Para dibujar con otras personas, la pizarra se conecta a una sala. Cada sala es una pequeña unidad de servidor que mantiene el estado del dibujo y reparte los cambios a quienes están conectados. Se ha construido sobre Cloudflare Workers y Durable Objects, que permiten tener un punto único de coordinación por sala sin administrar servidores propios.
Los participantes se comunican con la sala mediante WebSockets. Cuando alguien termina un trazo, se envía a la sala, que lo guarda y lo reenvía a los demás. Al entrar en una sala, recibes su estado en bloques de tamaño limitado; si la conexión se corta y vuelve, la sala puede enviarte solo lo que cambió mientras estabas fuera.
Selección y movimiento
Las herramientas de lazo y de selección permiten elegir varios trazos, moverlos o transformarlos. Si la selección es grande, los cambios se envían a la sala en lotes más pequeños para no superar los límites de tamaño de los mensajes.
Límites y abuso
Un servicio abierto necesita protegerse. Por eso hay límites en las salas que se pueden crear por hora y en el tamaño de cada mensaje. Para crear cuentas o salas se comprueba con Cloudflare Turnstile que quien lo hace es una persona. Las salas inactivas caducan a los siete días, con lo que también se borra su contenido.
Cuentas sin guardar la contraseña
Si creas una cuenta, la contraseña se transforma en tu navegador con un algoritmo de derivación (PBKDF2) antes de enviarse. El servidor solo guarda una huella de ese resultado. Aun así, conviene usar una contraseña que no repitas en otros servicios.
Qué se aprendió
- Guardar trazos como datos, y no como píxeles, simplifica casi todas las funciones.
- Los dispositivos táctiles exigen un diseño propio: agarres más grandes, gestos con varios dedos y una barra de herramientas que no tape el dibujo.
- Los límites de uso hay que pensarlos desde el principio, no cuando ya hay problemas.
Si quieres probarla, la guía de OtilinoDraw explica las herramientas y los atajos, y la página de privacidad detalla qué datos se tratan.
Decisiones de privacidad
Desde el principio se decidió guardar lo mínimo. En modo individual no hay servidor; en las salas se guarda el contenido necesario para que el dibujo exista y nada más. Las direcciones IP no se guardan en claro: se usa una huella calculada con una sal distinta para cada sala. Sirve para aplicar límites y vetos, pero no permite recuperar la dirección original.
Las salas caducan a los siete días sin actividad y su contenido se borra. Las pizarras de invitado se borran a las 24 horas. Todo esto está descrito en la página de privacidad.
Pruebas automáticas
El proyecto tiene pruebas que simulan varios clientes conectados a una sala, desconexiones, imágenes grandes, límites de uso y recuperación tras reinicios. Una pizarra colaborativa tiene muchas situaciones difíciles (dos personas moviendo el mismo trazo, una conexión que se corta a mitad de un envío) y probarlas a mano no basta.
Lo que no hace
- No filtra el contenido que se dibuja; la moderación depende de quien administra la sala.
- Las imágenes y los textos no se pueden girar ni deformar libremente como los trazos.
- Los demás participantes ven un trazo cuando terminas de dibujarlo, no mientras lo dibujas.
Conocer estas limitaciones también forma parte del diseño: cada una es una decisión sobre qué se prioriza en una primera versión.