Introducción a Canvas 2D: Fundamentos de Gráficos en JavaScript
Aprende los conceptos fundamentales de Canvas 2D para crear gráficos interactivos, visualizaciones de datos y animaciones directamente en el navegador usando JavaScript puro.
TL;DR - Resumen rápido
- Canvas es un elemento HTML5 que permite dibujar gráficos mediante JavaScript
- El contexto 2D es la interfaz principal para todas las operaciones de dibujo
- El sistema de coordenadas tiene su origen (0,0) en la esquina superior izquierda
- Canvas usa un modelo de dibujo inmediato: lo que dibujas permanece hasta que lo borras
- Es ideal para visualizaciones de datos, juegos simples y manipulación de imágenes
Introducción a Canvas
Canvas es una de las APIs más potentes de HTML5 para crear gráficos interactivos directamente en el navegador sin necesidad de plugins externos. A diferencia de SVG, que usa un modelo basado en objetos DOM, Canvas utiliza un modelo de dibujo basado en píxeles que te ofrece un control total sobre cada pixel de la superficie de dibujo.
Esta API es especialmente útil cuando necesitas alto rendimiento para renderizar miles de objetos, crear animaciones fluidas a 60fps, o manipular imágenes a nivel de pixel. Canvas se usa en aplicaciones como visualizaciones de datos en tiempo real, juegos web, editores de imágenes y herramientas de diseño interactivo.
Canvas vs SVG
Mientras SVG es ideal para gráficos vectoriales escalables y animaciones simples, Canvas brilla en escenarios que requieren alto rendimiento, manipulación de píxeles, o renderizado de miles de objetos. Canvas no crea elementos DOM, lo que lo hace más rápido pero menos accesible.
¿Qué es Canvas?
Canvas es un elemento HTML que proporciona una superficie de dibujo programable. Por sí solo, el elemento canvas es solo un contenedor rectangular sin contenido. Para dibujar en él, necesitas obtener un contexto de dibujo, que es el objeto que contiene todos los métodos y propiedades para crear gráficos.
El contexto más comúnmente usado es el contexto 2D, que proporciona métodos para dibujar formas, texto, imágenes y aplicar transformaciones. También existe el contexto WebGL para gráficos 3D, pero en este módulo nos enfocaremos exclusivamente en el contexto 2D.
El elemento canvas tiene dos atributos importantes: width y height, que definen el tamaño en píxeles de la superficie de dibujo. Es importante establecer estos atributos directamente en el elemento HTML o mediante JavaScript, ya que usar CSS para dimensionar el canvas puede causar distorsión en el dibujo.
Advertencia: Dimensionamiento incorrecto
Si usas CSS para cambiar el tamaño del canvas sin ajustar los atributos width y height, el dibujo se estirará o comprimirá. Siempre ajusta las dimensiones del canvas mediante sus atributos o las propiedades width/height en JavaScript para mantener la proporción correcta.
Obtener el Contexto de Dibujo
Antes de poder dibujar cualquier cosa, debes obtener el contexto 2D del elemento canvas. El contexto es un objeto que contiene todos los métodos de dibujo como fillRect(), strokeRect(), beginPath(), moveTo(), lineTo(), y muchos más. Este contexto es tu herramienta principal para crear gráficos en Canvas.
El método getContext() toma un string que especifica el tipo de contexto que deseas obtener. Para gráficos 2D, usamos '2d'. Este método devuelve null si el contexto no está soportado, por lo que es buena práctica verificar que el contexto se obtuvo correctamente antes de intentar dibujar.
Soporte del navegador
Canvas 2D es soportado por todos los navegadores modernos, incluyendo Chrome, Firefox, Safari, Edge y sus versiones móviles. Sin embargo, si necesitas soportar navegadores muy antiguos (IE9 y anteriores), considera usar una biblioteca de polyfill o ofrecer una alternativa basada en SVG.
Sistema de Coordenadas
Canvas utiliza un sistema de coordenadas cartesiano donde el punto (0,0) está en la esquina superior izquierda del canvas. El eje X aumenta hacia la derecha y el eje Y aumenta hacia abajo. Este sistema es diferente al sistema matemático tradicional donde Y aumenta hacia arriba, por lo que es importante tenerlo en cuenta al dibujar.
Las coordenadas en Canvas se expresan en píxeles y pueden ser valores decimales, lo que permite dibujar con precisión sub-pixel. Sin embargo, ten en cuenta que el renderizado final siempre se convierte a píxeles enteros, lo que puede causar anti-aliasing en ciertos casos.
Este ejemplo muestra cómo las coordenadas funcionan en Canvas. El rectángulo azul está en (50,50), el verde en (200,50) y el rojo en (50,200). Observa cómo el valor Y aumenta hacia abajo, no hacia arriba como en matemáticas tradicionales.
- El origen (0,0) está en la esquina <strong>superior izquierda</strong>
- El eje X aumenta hacia la <strong>derecha</strong>
- El eje Y aumenta hacia <strong>abajo</strong>
- Las coordenadas pueden ser <strong>decimales</strong> para mayor precisión
- Las coordenadas negativas dibujan <strong>fuera</strong> del canvas visible
Primer Dibujo en Canvas
Ahora que conocemos los fundamentos, vamos a crear nuestro primer dibujo. El método más simple para dibujar es fillRect(), que dibuja un rectángulo relleno. Complementariamente, strokeRect() dibuja el contorno de un rectángulo sin relleno. Estos son los bloques de construcción básicos para formas más complejas.
Este ejemplo demuestra los métodos básicos de dibujo de rectángulos. fillRect() dibuja rectángulos rellenos con el color actual de relleno, mientras que strokeRect() dibuja solo el contorno. También puedes usar clearRect() para borrar áreas específicas del canvas, lo que es útil para animaciones donde necesitas limpiar el frame anterior antes de dibujar el nuevo.
Buenas prácticas de dibujo
Siempre define el tamaño del canvas antes de obtener el contexto. Usa fillStyle y strokeStyle para definir colores antes de dibujar. Para animaciones, usa requestAnimationFrame() en lugar de setInterval() para un rendimiento óptimo y sincronización con el refresco del monitor.
Resumen: Introducción a Canvas
Conceptos principales:
- •Canvas es un elemento HTML5 para dibujar gráficos mediante JavaScript
- •El contexto 2D es la interfaz principal para operaciones de dibujo
- •El sistema de coordenadas tiene origen en la esquina superior izquierda
- •Canvas usa un modelo de dibujo inmediato basado en píxeles
- •Los atributos width y height definen el tamaño en píxeles del canvas
Mejores prácticas:
- •Define siempre width y height en el elemento, no solo con CSS
- •Verifica que getContext() retorne un contexto válido antes de dibujar
- •Usa requestAnimationFrame() para animaciones fluidas a 60fps
- •Prepara colores y estilos antes de ejecutar comandos de dibujo
- •Limpia el canvas con clearRect() antes de cada frame en animaciones