✏️ canvas-rxjs

Una pizarra en tiempo real interactiva creada usando RxJS para los eventos del ratón y dibujar directamente sobre un <canvas> en Angular o JavaScript puro.

---

🔍 Tabla de contenidos

• Características
• Requisitos
• Instalación
• Uso
• Cómo funciona bajo el capó
• Arquitectura & estilo
• Mejoras sugeridas
• Contribuciones
• Licencia

---

🚀 Características

• Dibujo libre sobre canvas usando eventos de ratón o touch.
• Flujo reactivo gestionado con RxJS: fromEvent, switchMap, pairwise, takeUntil.
• Funciona en Angular o en JavaScript vanilla.
• Responsive y ligero.

---

⚙️ Requisitos

• Node.js y npm (si lo integras en un proyecto Angular).
• Angular CLI (opcional, solo si usas Angular).
• Navegador moderno con soporte para Canvas y eventos de entrada.

---

📦 Instalación

1. Clona el repo:

   git clone https://github.com/FrancoDavid/canvas-rxjs.git
   cd canvas-rxjs

2. Si es parte de un app Angular:

   npm install
   ng serve

3. En versiones sin framework, basta con servir los archivos estáticos (HTML/JS/CSS) en cualquier servidor local.

---

🚚 Uso

1. Abre la app en un navegador (ng serve o live-server).
2. Accede a la página con canvas.
3. Haz clic y arrastra (o toca y arrastra) para dibujar.
4. Suelta el ratón/touch y detén el dibujo.

---

⚙️ Cómo funciona bajo el capó

Basado en patrones estándar de dibujo reactivo:

• Se escucha mousedown (o touchstart).
• Con switchMap, se suscribe a mousemove hasta mouseup usando takeUntil.
• pairwise() permite obtener pares consecutivos de eventos para dibujar líneas suaves.
• Cada par de puntos se conecta con canvasContext.lineTo(), partiendo desde el primero con beginPath() ([gist.github.com][1], [npmjs.com][2], [blog.huli.tw][3], [reddit.com][4]).

Esto crea un flujo funcional tipo “mousedown → dibujo → mouseup”.

---

🏛️ Arquitectura & estilo

• RxJS: flujo reactivo puro con un único subscribe, evitando anidado de suscripciones .

• Canvas API: moveTo, lineTo, strokeStyle, lineWidth, etc.

• Estructura:

  canvas-rxjs/
    ├── index.html
    ├── canvas.js       ← lógica principal RxJS+Canvas
    ├── styles.css
    └── angular/        ← (opcional) integración Angular con componente
  

• Código limpio, modular y fácil de portar a frameworks.

---

🔧 Mejoras sugeridas

• Botones “Limpiar”, “Descargar como PNG”, “Deshacer/Rehacer”.
• Selección de color y grosor con RxJS.
• Soporte táctil completo.
• Guardado/restauración de dibujos en localStorage o servidor.
• Añadir tests (unitarios o visuales).
• Sincronización en tiempo real con WebSocket o WebRTC para pizarra colaborativa.

---

👥 Contribuciones

¡Encantado de recibir aportes!

1. Haz fork.
2. Crea rama feature/nombre.
3. Añade cambios con commits claros.
4. Abre PR detallando tu aporte.

---

⚖️ Licencia

MIT. Consulta LICENSE para más detalles.