EN JA ZH ES

Canvas API

Una API de JavaScript para dibujo a nivel de píxel y manipulación de imágenes en elementos canvas de HTML5 directamente en el navegador.

La Canvas API, introducida con HTML5, proporciona una interfaz JavaScript para gráficos a nivel de píxel en elementos <canvas>. Al obtener un contexto 2D mediante getContext('2d'), los desarrolladores pueden dibujar trazados, renderizar texto, componer imágenes y manipular píxeles individuales.

Para el procesamiento de imágenes, el flujo de trabajo estándar consiste en dibujar una imagen con drawImage(), extraer datos de píxeles (array RGBA) mediante getImageData() y aplicar transformaciones. Esto permite el recorte, redimensionado, filtrado y corrección de color del lado del cliente sin necesidad de comunicación con el servidor.

Muchas herramientas basadas en navegador como el compresor de imágenes y la herramienta de redimensionado utilizan internamente la Canvas API. Los resultados se exportan mediante toBlob() o toDataURL() en formato JPEG, PNG o WebP. Para imágenes grandes, OffscreenCanvas con Web Workers evita el bloqueo del hilo principal.

Términos relacionados

Artículos relacionados