🎨 Paint Canvas
Editor de imagen sobre HTML5 Canvas: capas, deshacer y rehacer, filtros y ajustes de color
Proyecto académico
Capas
Deshacer / rehacer
Escala del Proyecto
20Pasos
1.868Líneas finales
0Librerías
Descripción General
Ejercicio de la asignatura de Informática Gráfica desarrollado en 20
pasos, desde dibujar un rectángulo en un lienzo hasta un editor de imagen
que va bastante más lejos de lo que el enunciado pedía.
La versión final incluye sistema de capas —añadir, duplicar y
eliminar—, historial de deshacer y rehacer,
filtros de escala de grises e inversión, ajustes
de brillo, contraste, tono y saturación, volteo horizontal y vertical,
redimensionado, fondo blanco, negro o transparente, y apertura y guardado tanto de
la imagen como del proyecto.
Todo con la API Canvas nativa y JavaScript, sin ninguna librería.
Los filtros y ajustes se aplican manipulando directamente los datos de píxeles del
lienzo, que es exactamente el punto del ejercicio.
Tecnologías Utilizadas
HTML5 Canvas
JavaScript
CSS3
ImageData
toDataURL
Funcionalidades de la Versión Final
- Dibujo a mano alzada con selector de color, grosor y tipo de
punta.
- Capas: añadir, duplicar y eliminar, con gestión
independiente.
- Deshacer y rehacer mediante historial de estados del
lienzo.
- Filtros: escala de grises e inversión de color, aplicados sobre
los datos de píxel.
- Ajustes: brillo, contraste, tono y saturación, con opción de
restablecer.
- Transformaciones: volteo horizontal, volteo vertical y
redimensionado del lienzo.
- Fondo configurable en blanco, negro o transparente.
- Importar imagen desde el equipo y pintar sobre ella.
- Guardar la imagen resultante como fichero descargable.
- Guardar y abrir el proyecto, no solo la imagen aplanada.
Progresión del Ejercicio
Los 20 pasos están en el repositorio como ficheros HTML independientes. Cada uno
añade una capacidad sobre el anterior.
- 001-003El lienzo: crearlo, obtener su contexto de
dibujo y darle dimensiones.
- 004-008Primitivas: rectángulos, círculos, color de
relleno, relleno y trazo.
- 009-010Línea a mano alzada y una primera composición
abstracta.
- 011-012El primer Paint funcional y el control del
estado del ratón.
- 013-015Herramientas: selector de color, grosor de la
brocha y tipo de punta.
- 016-017Trabajo con imágenes: cargarlas en el lienzo y
controlar su tamaño.
- 018-019Guardado: botón de guardar y descarga del
resultado.
- 020Versión final: capas, deshacer y rehacer, filtros,
ajustes de color, transformaciones y guardado de proyecto. 1.868 líneas.
Qué Aprendí
- Que el contexto 2D del Canvas es una máquina de estado: el color y el grosor
actuales afectan a todo lo que dibujes después, y hay que guardarlo y restaurarlo
con cuidado.
- Que deshacer y rehacer en un lienzo no es trivial, porque el Canvas no guarda
historial: hay que capturar el estado de la imagen en cada paso y gestionar dos
pilas.
- Que los filtros y los ajustes de color son aritmética sobre el array de píxeles
de
ImageData, sin ninguna magia.
- Que un sistema de capas obliga a replantear la arquitectura: dejas de dibujar en
un lienzo y pasas a componer varios.
- Que
toDataURL() convierte el lienzo en una imagen descargable con
una línea, y que guardar el proyecto es un problema distinto y más
interesante que guardar la imagen.
Mi Rol
Autor del ejercicio. Práctica individual de la asignatura de
Informática Gráfica.
Estado del Proyecto
Ejercicio académico completado, con los 20 pasos en el repositorio
de apuntes.
Código y Enlaces
Ruta dentro del repositorio: Apuntes/013-Informatica grafica/001-Empezamos a
dibujar/