Este repositorio contiene una práctica utilizando ReactJS y Canvas HTML5.
El proyecto consiste en crear una aplicación web de una sola página (SPA) que permite dibujar figuras básicas como: círculo, triángulo, cuadrado, líneas y utilizar una herramienta de lápiz. Además, incluye opciones avanzadas como:
- Modificación del color de los bordes y el fondo de cada figura.
- Ajuste del grosor de los bordes para cada figura.
También se han implementado herramientas adicionales, como:
- Gestión de capas.
- Herramienta de borrador.
- Exportar el lienzo en formato PNG o JPG.
- Funcionalidades de rehacer y deshacer.
- Exportar e importar lienzos en formato JSON.
Como características adicionales, se incluye la opción de dibujar una figura de corazón y agregar texto como herramienta.
El sitio es completamente adaptable (responsive), optimizado para dispositivos táctiles, tabletas, laptops y computadoras de escritorio. Además, incluye mejoras de accesibilidad como tooltips para cada herramienta.
Este conjunto de tecnologías y características para este sitio web:
- Proyecto dockerizado. (*)
- Proyecto vagratizado. (*)
- Estilos de Tailwind CSS
- Componentes funcionales de ReactJS
- Hooks personalizados
- Context y Provider
- Canvas HTML 5
- React Icons (Bootstrap)
- React Tooltip
- Etiquetas de Open Graph (para SEO)
- Node v18.20.4
- pnpm v9.9.0
Dependencias instaladas:
- react v18.3.1
- react-dom v18.3.1
- react-icons v5.3.0
- react-router-dom v6.26.2
- react-tooltip v5.28.0
Puede utilizar estos archivos JSON de pruebas, con figuras creados usando el sitio pizarra js.
