Imágenes en Canvas 2D: Dibujo, Recorte, Escala y Composición

Introducción a Imágenes en Canvas

Canvas permite dibujar y manipular imágenes directamente en la superficie de dibujo usando el método drawImage(). Este método es muy flexible y te permite dibujar imágenes completas, porciones recortadas, o imágenes escaladas a diferentes tamaños. También puedes aplicar transformaciones como rotación y escala a las imágenes.

Las imágenes en Canvas son ideales para crear juegos, editores de imágenes, visualizaciones con iconos, o cualquier aplicación que necesite manipular gráficos rasterizados. A diferencia de las formas vectoriales, las imágenes son representaciones de píxeles que no pueden escalarse infinitamente sin perder calidad.

Dibujar Imágenes (drawImage)

El método drawImage() tiene tres variantes principales. La más simple toma solo la imagen y las coordenadas (x, y) donde dibujarla. La segunda variante también especifica el ancho y alto para escalar la imagen. La tercera variante permite recortar una porción de la imagen antes de dibujarla.

Es crucial esperar a que la imagen cargue completamente antes de intentar dibujarla. Puedes usar el evento 'load' de la imagen o verificar la propiedad complete. Intentar dibujar una imagen que no ha cargado resultará en un error o en que no se dibuje nada.

Este ejemplo muestra las tres variantes de drawImage(). La primera dibuja la imagen en su tamaño original, la segunda la escala a un tamaño específico, y la tercera dibuja una porción recortada de la imagen. Observa cómo los parámetros controlan diferentes aspectos del dibujo.

• <strong>drawImage(img, x, y)</strong> - Dibujar imagen en tamaño original
• <strong>drawImage(img, x, y, width, height)</strong> - Dibujar imagen escalada
• <strong>drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)</strong> - Dibujar porción recortada
• Espera al evento <code>'load'</code> antes de dibujar
• Usa <code>img.complete</code> para verificar si la imagen cargó

Recortar Imágenes

La tercera variante de drawImage() permite recortar una porción de la imagen antes de dibujarla. Los primeros cuatro parámetros (sx, sy, sw, sh) especifican la porción a recortar: coordenadas del origen del recorte (sx, sy) y dimensiones del recorte (sw, sh). Los últimos cuatro parámetros (dx, dy, dw, dh) especifican dónde y con qué tamaño dibujar el recorte.

El recorte es útil para crear sprites en juegos, extraer partes de una imagen, o implementar efectos de enmascaramiento. Puedes recortar múltiples porciones de una misma imagen para crear un atlas de texturas, lo que mejora el rendimiento al reducir el número de imágenes que el navegador debe cargar.

Este ejemplo muestra cómo recortar diferentes porciones de una imagen y dibujarlas en diferentes posiciones. El recorte se especifica con las coordenadas y dimensiones de la porción deseada, y luego se dibuja en la posición y tamaño especificados.

Escalar Imágenes

Escalar imágenes en Canvas es tan simple como especificar las dimensiones deseadas en drawImage(). Sin embargo, la calidad del escalado depende del algoritmo que el navegador usa. Por defecto, los navegadores usan un algoritmo de suavizado que puede causar imágenes borrosas cuando se escalan significativamente.

Para mejorar la calidad del escalado, puedes ajustar la propiedad imageSmoothingEnabled del contexto. Cuando es true (predeterminado), el navegador usa suavizado. Cuando es false, usa el algoritmo de vecino más cercano, que preserva los bordes nítidos pero puede causar pixelación.

Este ejemplo muestra cómo escalar imágenes con diferentes configuraciones de suavizado. La primera imagen se escala con suavizado activado, la segunda con suavizado desactivado. Observa la diferencia en la calidad del escalado, especialmente en bordes y detalles finos.

• <strong>imageSmoothingEnabled</strong> - Controla el suavizado de imágenes
• True = suavizado activado (predeterminado, más suave)
• False = suavizado desactivado (más nítido, pixelado)
• Usa false para <strong>pixel art</strong> o gráficos retro
• Usa true para fotografías y gradientes suaves

Composición de Imágenes

La propiedad globalCompositeOperation controla cómo se mezclan las imágenes y formas nuevas con el contenido existente del canvas. Esta propiedad es muy poderosa y permite crear efectos como transparencias, máscaras, recortes, y composiciones complejas sin necesidad de capas adicionales.

Hay 16 modos de composición diferentes, incluyendo 'source-over' (predeterminado), 'source-in', 'source-out', 'source-atop', 'destination-over', 'destination-in', 'destination-out', 'destination-atop', 'lighter', 'copy', 'xor', 'multiply', 'screen', 'overlay', 'darken', y 'lighten'. Cada modo produce un efecto diferente de mezcla.

Este ejemplo muestra diferentes modos de composición. 'source-over' dibuja la nueva imagen sobre la existente (comportamiento normal). 'multiply' multiplica los colores, creando un efecto de oscurecimiento. 'screen' hace lo opuesto, creando un efecto de aclaramiento. Experimenta con diferentes modos para crear efectos únicos.