KENDALL MENDOZA

Project overview Project overview

This mini paint explores how to combine multiple brush engines, a background-aware eraser, and a flood fill tool on top of the HTML5 Canvas API, keeping the implementation in vanilla JavaScript with no UI framework.

Este mini paint explora cómo combinar varios motores de brocha, un borrador que entiende el color de fondo y una herramienta de relleno sobre la API de Canvas de HTML5, manteniendo la implementación en JavaScript puro sin framework de UI.

Tech and tools Tecnologías y herramientas

Challenges and how they were solved Retos y cómo se resolvieron

• Smart Background Detection
  The flood fill algorithm goes beyond just changing pixels: it analyzes the filled area's coverage and edge contact to infer if the global background has changed. This automatically updates the eraser tool to paint with the new background color, keeping the tools context-aware without manual adjustment.
• Detección inteligente de fondo
  El algoritmo de relleno va más allá de cambiar píxeles: analiza la cobertura del área y el contacto con los bordes para inferir si el fondo global cambió. Esto actualiza automáticamente el borrador para pintar con el nuevo color de fondo, manteniendo las herramientas conscientes del contexto sin ajustes manuales.
• Context-aware Tooling
  Tools like Fill are designed for flow. The application remembers your previous brush state, so after performing a one-off action like filling the canvas, it automatically switches you back to your drawing tool, reducing friction and click fatigue.
• Herramientas conscientes del contexto
  Herramientas como Rellenar están diseñadas para el flujo de trabajo. La aplicación recuerda tu brocha anterior, por lo que tras una acción puntual como rellenar el canvas, te devuelve automáticamente a tu herramienta de dibujo, reduciendo la fricción y los clics innecesarios.
• Coordinating multiple brush engines
  Each brush uses a different rendering strategy (solid strokes, gradients, particles, ribbons). Shared helpers for distance, interpolation and color conversion keep the code small while still allowing new brushes to be added.
• Coordinar varios motores de brocha
  Cada brocha usa una estrategia de renderizado distinta (trazos sólidos, gradientes, partículas, cintas). Helpers compartidos para distancia, interpolación y conversión de color mantienen el código compacto y permiten seguir agregando brochas.
• Undo/redo with image snapshots
  Because the canvas does not expose individual strokes, history is implemented with capped image snapshots. This keeps undo/redo responsive while still allowing several steps in both directions.
• Deshacer/rehacer con snapshots de imagen
  Como el canvas no expone trazos individuales, el historial se implementa con snapshots de imagen limitados. Esto mantiene deshacer/rehacer ágil y permite varios pasos en ambas direcciones.