Descripción General
Aplicación de pintura interactiva construida íntegramente sobre la API Canvas de HTML5
y JavaScript vanilla. Permite dibujar a mano alzada con control completo sobre el color, el grosor
y el tipo de punta de la brocha.
El proyecto se desarrolló en 20 pasos progresivos, partiendo de un lienzo en blanco hasta una
aplicación de pintura con descarga de imagen e integración con IA. No usa ninguna librería externa.
Tecnologías Utilizadas
HTML5 Canvas
JavaScript
CSS3
Mouse Events
Características Clave
- Dibujo a mano alzada: Tracking del ratón con eventos mousemove para trazado suave
- Selector de color: Color picker HTML5 integrado en la UI
- Control de grosor: Slider para ajustar el tamaño de la brocha en tiempo real
- Tipo de punta: Selección entre punta redonda y cuadrada (lineCap)
- Inserción de imágenes: Carga y dibuja imágenes sobre el canvas
- Descarga como PNG: Exporta el dibujo mediante un enlace con data URL
- Integración con IA: Versión final conectada a modelo de lenguaje
- Sin dependencias: Solo HTML, CSS y JavaScript nativo
Progresión del Proyecto (20 pasos)
- 001–003: Canvas básico, contexto 2D y dimensiones
- 004–006: Rectángulos, círculos y colores de relleno
- 007–008: Múltiples formas, relleno y trazo simultáneo
- 009–010: Dibujo a mano con ratón, pintura abstracta aleatoria
- 011–012: App Paint funcional, visualización del estado del ratón
- 013–015: Color picker, control de grosor y tipo de punta
- 016–017: Pintado de imágenes y control de tamaño
- 018–019: Guardado y descarga como PNG
- 020: Versión final con integración de IA
Mi Rol
Desarrollador Frontend — Canvas API y JavaScript
Exploré la API Canvas de HTML5 de principio a fin, implementando cada funcionalidad
desde cero: tracking del ratón, gestión del contexto 2D, exportación de imágenes
y controles de usuario. El proyecto demuestra dominio completo de gráficos 2D en el navegador.
Estado
Estado: ⚡ Proyecto de Aprendizaje
Proyecto académico que demuestra el dominio de la API Canvas de HTML5 y la manipulación
de gráficos en tiempo real con JavaScript vanilla.