Canvas: qué es, métodos de renderizado y cómo funciona

¿Qué es Canvas?

Canvas es un área rectangular en la pantalla donde un programa realiza renderizado píxel por píxel utilizando un contexto de dibujo. El concepto se originó en los estándares web HTML5 como parte de la especificación WHATWG en 2004 y desde entonces se ha convertido en la base para gráficos en todas las plataformas.

La principal diferencia entre Canvas y los enfoques declarativos (SVG, componentes UI) es que Canvas no almacena una escena. Después del renderizado, los píxeles se fijan y para cambiar la imagen, el programa debe borrar y redibujar el área necesaria. Esto proporciona un rendimiento máximo en animaciones y un consumo mínimo de memoria para el almacenamiento de la escena.

Canvas admite dos tipos de contexto: 2D para gráficos planos y WebGL / WebGL2 para renderizado tridimensional mediante aceleración de hardware GPU. Según Statista (2025), la API de Canvas se utiliza en el 89% de los juegos de navegador y el 67% de los editores web.

Para el desarrollo móvil, Canvas está adaptado en cada plataforma: en Android mediante la clase Canvas, en iOS mediante Core Graphics y Metal, en .NET MAUI mediante Microsoft.Maui.Graphics. El principio único — contexto de dibujo, sistema de coordenadas y pila de transformaciones — permanece sin cambios independientemente de la plataforma.

Elementos de Canvas

El lienzo es una matriz de mapa de bits de tamaño fijo especificada en píxeles. Cada píxel almacena un valor RGBA: canales rojo, verde, azul y transparencia alfa. El sistema de coordenadas de Canvas comienza desde la esquina superior izquierda, donde el eje X va hacia la derecha y el eje Y hacia abajo.

El tamaño del lienzo se determina por dos parámetros: ancho y alto en píxeles. Es importante distinguir los atributos width y height del lienzo de las dimensiones CSS — CSS puede escalar el área visible, pero la resolución interna permanece establecida por los atributos. La falta de coincidencia de estos parámetros provoca desenfoque de la imagen.

En Android, el tamaño de Canvas generalmente coincide con el tamaño de la View o Bitmap en el que se crea. Cuando se llama a onDraw(), se pasa un Canvas ya configurado al tamaño de la vista — el desarrollador no necesita establecer dimensiones manualmente.

¿Cómo funciona Canvas?

Canvas funciona a través de un contexto de dibujo — un objeto que almacena el estado actual: color de relleno, grosor de línea, transformaciones y trazado. Todas las llamadas a los métodos de dibujo se aplican a este estado y modifican la matriz de mapa de bits del lienzo.

El proceso de renderizado sigue un pipeline: limpiar área → configurar estado → construir trazado → trazar o rellenar. Durante la animación, este ciclo se repite 60 veces por segundo, lo que requiere optimización de cada paso para mantener la fluidez.

Canvas utiliza modo de renderizado inmediato, donde cada comando de dibujo se ejecuta de inmediato. A diferencia del modo retenido (SVG o DOM), Canvas no almacena una lista de objetos. Esto reduce el consumo de memoria pero complica la interactividad — el desarrollador debe implementar la detección de impacto y el redibujado por sí mismo.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#3498db';
ctx.fillRect(10, 10, 100, 50);
ctx.font = '16px sans-serif';
ctx.fillText('Hello Canvas', 10, 80);

En el ejemplo anterior, obtenemos el contexto 2D, establecemos el color de relleno, dibujamos un rectángulo, luego configuramos la fuente y mostramos texto. Todas las operaciones se realizan en un lienzo del tamaño especificado en los atributos width y height del elemento.

La pila de estados de Canvas permite guardar y restaurar parámetros de dibujo. El método save() coloca el estado actual en la pila, restore() restaura el anterior. Esto es conveniente para transformaciones en cascada cuando se necesita aplicar un desplazamiento o rotación a un grupo de elementos sin afectar a los demás.

Métodos principales de Canvas API

Canvas API proporciona alrededor de 40 métodos para renderizar primitivas, imágenes, texto y gestionar estilos. El conjunto básico incluye métodos para trabajar con rectángulos, trazados, arcos y texto. Veamos los grupos clave de métodos.

Dibujo de primitivas

Rectángulos son las primitivas más rápidas de Canvas. El método fillRect(x, y, w, h) dibuja un rectángulo relleno, strokeRect() dibuja solo el borde, clearRect() limpia el área. Para polígonos complejos se utiliza el objeto Path2D, que se puede reutilizar entre fotogramas.

Trabajo con imágenes

drawImage() es el método principal para renderizar imágenes rasterizadas en Canvas. El método acepta tres conjuntos de parámetros: copia simple, escalado y recorte con escalado. La imagen se puede cargar desde HTMLImageElement, SVGImageElement u otro Canvas.

Para el desarrollo móvil es crítico que drawImage() funcione con Bitmap en Android y UIImage en iOS. Las implementaciones de plataforma utilizan aceleración de hardware cuando la imagen y Canvas están en la misma memoria de textura GPU. Si la imagen no coincide con el perfil de color, es posible una pérdida de rendimiento debido a la conversión.

Animación en Canvas

requestAnimationFrame() es el mecanismo estándar para animación en Canvas. A diferencia de setInterval, este método sincroniza el renderizado con la frecuencia de actualización de la pantalla (generalmente 60 FPS). Cuando la pestaña está en segundo plano, el navegador detiene las llamadas, ahorrando batería.

Para optimizar la animación de Canvas, minimice el área de redibujado: en lugar de limpiar todo el lienzo, use clearRect() solo en la región modificada. Agrupar elementos en una sola capa y almacenar en caché las partes estáticas en un Canvas fuera de pantalla reduce la carga en el pipeline de renderizado.

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#e74c3c';
    ctx.beginPath();
    ctx.arc(x, 60, 25, 0, Math.PI * 2);
    ctx.fill();
    x += 2;
    requestAnimationFrame.bind(animate);
}

El bucle de animación limpia el lienzo, actualiza la posición del objeto y lo redibuja. requestAnimationFrame garantiza fluidez y pausa automática al ocultar la pestaña, ahorrando recursos del dispositivo.

Canvas en desarrollo móvil

Canvas en plataformas móviles se implementa de manera diferente, pero se basa en la idea común de un lienzo programático. En Android, la clase Canvas es parte del sistema gráfico, pasada al método onDraw(Canvas) de cualquier View. En iOS, el equivalente es Core Graphics con el contexto CGContext.

Canvas en Android

Canvas de Android funciona junto con Bitmap o SurfaceView. Al crear Canvas mediante Bitmap, el renderizado se realiza en memoria, mientras que mediante SurfaceView — directamente en la pantalla con aceleración de hardware. Desde API 14+, Canvas usa HWUI — un acelerador de hardware que traduce comandos de dibujo a OpenGL o Vulkan.

Los métodos clave de Android Canvas incluyen drawBitmap(), drawCircle(), drawLine() y drawPath(). Todos los métodos aceptan Paint — un objeto que controla el estilo: color, grosor, efectos de suavizado. Según Google I/O (2024), Canvas en HWUI muestra una ganancia de rendimiento de hasta el 40% en comparación con el renderizado por software.

class CustomView(context: Context) : View(context) {
    private val paint = Paint().apply {
        color = Color.RED
        isAntiAlias = true
        strokeWidth = 4f
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawCircle(100f, 100f, 50f, paint)
        canvas.drawText("Canvas Android", 100f, 200f, paint)
    }
}

En Android, Canvas usa aceleración de hardware por defecto desde API 14+. Para gráficos complejos, se recomienda SurfaceView o TextureView, que asignan una capa separada para renderizado en un hilo de fondo. Esto evita bloquear el hilo de UI durante animaciones intensivas.

Canvas en iOS

Core Graphics es el framework de Apple para gráficos rasterizados y vectoriales, equivalente a Canvas. El contexto CGContext proporciona métodos para dibujar líneas, curvas, degradados y sombras. En SwiftUI, Canvas está disponible a través de la estructura Canvas, añadida en iOS 15.

SwiftUI Canvas usa GraphicsContext — un envoltorio type-safe sobre Core Graphics. El desarrollador trabaja con GraphicsContext, que admite transformaciones, capas y símbolos. A diferencia de UIKit, SwiftUI Canvas maneja automáticamente pantallas Retina y tipos dinámicos.

struct MyCanvasView: View {
    var body: some View {
        Canvas { context, size in
            context.fill(
                Path(ellipseIn: CGRect(x: 0, y: 0, width: 100, height: 100)),
                with: .color(.red)
            )
            context.draw(
                Text("Canvas iOS"),
                at: CGPoint(x: 50, y: 150)
            )
        }
        .frame(width: 300, height: 300)
    }
}

SwiftUI Canvas se caracteriza por su sintaxis declarativa y optimización automática del renderizado. El framework determina qué partes del lienzo necesitan redibujarse cuando cambia el estado. GraphicsContext admite capas a través del método drawLayer, simplificando la creación de gráficos multicapa.

Rendimiento de Canvas

El rendimiento de Canvas depende de tres factores: área de redibujado, número de llamadas de dibujo y complejidad de las operaciones. Cada llamada a un método de dibujo es un comando que pasa por un pipeline: la CPU forma el comando, la GPU realiza la rasterización.

La regla principal de optimización es minimizar el número de llamadas. En lugar de dibujar 1000 puntos individuales, use un trazado con 1000 segmentos — una llamada a stroke() en lugar de 1000. La segunda regla es almacenamiento en caché de estáticos: mueva elementos sin cambios a un Canvas fuera de pantalla y cópielos mediante drawImage().

Herramientas de perfilado: Chrome DevTools Performance para web, GPU Inspector para Android e Instruments para iOS. Según Google Chrome Developers (2025), el 70% de los problemas de rendimiento de Canvas son causados por redibujado excesivo y falta de almacenamiento en caché de capas.

Para dispositivos móviles, el ahorro de batería es crítico. El renderizado excesivo carga la GPU y reduce el tiempo de funcionamiento. Use el método willBePresented() en Android y displayLink en iOS para sincronizar con la frecuencia de actualización de la pantalla.

Funcionalidades avanzadas de Canvas

Canvas moderno ha ido más allá del simple renderizado 2D. WebGL basado en CanvasContext permite renderizar gráficos tridimensionales con aceleración de hardware. OffscreenCanvas traslada el renderizado pesado a Web Workers sin bloquear el hilo de UI.

WebGL mediante Canvas

WebGL es un contexto de Canvas que proporciona acceso a OpenGL ES desde el navegador. En lugar de fillRect(), el desarrollador escribe shaders en GLSL y carga geometría en búferes. Según Statista (2025), el 92% de los navegadores móviles admiten WebGL 2.0, lo que convierte a Canvas en la base para juegos web y visualizaciones 3D.

Canvas como contenedor para WebGL simplifica la integración de gráficos 2D y 3D en una sola aplicación. Por ejemplo, una escena 3D se renderiza mediante WebGL, mientras que la superposición de UI se renderiza mediante el contexto 2D del mismo lienzo. El renderizado mixto requiere gestionar el orden z y sincronizar las frecuencias de fotogramas.

OffscreenCanvas

OffscreenCanvas es una API para trasladar el renderizado a un hilo de fondo. A diferencia de un Canvas normal, OffscreenCanvas no está vinculado al DOM y se puede usar en un Web Worker. Esto permite realizar cálculos gráficos complejos en paralelo con el hilo principal sin caídas de FPS.

La transferencia de un fotograma completo desde un Worker al hilo principal ocurre mediante transferControlToOffscreen() y commit(). Según Chrome Platform Status (2025), OffscreenCanvas es compatible con el 87% de los navegadores y se recomienda para aplicaciones con renderizado intensivo — editores gráficos, gráficos y animaciones.