Texto en Canvas 2D: Renderizado, Estilos y Alineación

Introducción al Texto en Canvas

Canvas permite dibujar texto directamente en la superficie de dibujo usando métodos especializados. A diferencia del texto HTML, el texto en Canvas es parte de la imagen renderizada y no es seleccionable ni accesible por lectores de pantalla. Sin embargo, ofrece un control total sobre la tipografía y permite crear efectos visuales únicos.

El texto en Canvas es ideal para crear etiquetas en visualizaciones de datos, títulos en juegos, efectos de texto artísticos, o cualquier situación donde necesites texto integrado en un gráfico complejo. Para contenido textual importante, considera usar HTML superpuesto sobre el canvas para mantener la accesibilidad.

Texto Básico

Canvas proporciona dos métodos principales para dibujar texto: fillText() para texto relleno y strokeText() para texto con solo contorno. Ambos métodos toman el texto a dibujar y las coordenadas (x, y) donde se posicionará el texto. Las coordenadas dependen de las propiedades textAlign y textBaseline.

Este ejemplo muestra los dos métodos de dibujo de texto. fillText() usa el color definido en fillStyle, mientras que strokeText() usa strokeStyle y lineWidth. Puedes combinar ambos métodos para crear texto con relleno y contorno, lo que es útil para mejorar la legibilidad sobre fondos complejos.

Estilos de Texto

La propiedad font controla el estilo del texto y usa la misma sintaxis que CSS: estilo (italic, normal), peso (bold, normal, 100-900), tamaño (en px, em, rem), y familia de fuentes. También puedes usar otras propiedades como fillStyle para el color de relleno y strokeStyle para el color del contorno.

Es importante definir la propiedad font antes de dibujar texto, ya que Canvas usa una fuente predeterminada de 10px sans-serif si no se especifica. Las fuentes web funcionan normalmente, pero asegúrate de que estén cargadas antes de dibujar el texto.

Este ejemplo muestra diferentes estilos de texto. La propiedad font sigue la sintaxis CSS completa, permitiendo combinar estilo, peso, tamaño y familia de fuentes. También puedes usar fillStyle y strokeStyle para definir colores diferentes para el relleno y el contorno.

• <strong>font</strong> - Sintaxis CSS: estilo peso tamaño familia (ej: 'bold 24px Arial')
• <strong>fillStyle</strong> - Color del relleno del texto (ej: '#3b82f6')
• <strong>strokeStyle</strong> - Color del contorno del texto (ej: '#ef4444')
• <strong>lineWidth</strong> - Grosor del contorno en píxeles
• Usa fuentes web estándar o carga fuentes personalizadas con <code>@font-face</code>

Alineación y Posicionamiento

Las propiedades textAlign y textBaseline controlan cómo se posiciona el texto en relación con las coordenadas (x, y) especificadas. textAlign controla la alineación horizontal, mientras que textBaseline controla la alineación vertical. Entender estas propiedades es crucial para posicionar texto correctamente.

textAlign puede ser 'start', 'end', 'left', 'right' o 'center'. 'start' y 'end' dependen de la dirección del texto (LTR o RTL). textBaseline puede ser 'top', 'hanging', 'middle', 'alphabetic', 'ideographic' o 'bottom'. 'alphabetic' es el valor predeterminado y alinea con la línea base de las letras.

Este ejemplo muestra diferentes alineaciones de texto. textAlign determina cómo el texto se alinea horizontalmente respecto a la coordenada x, mientras que textBaseline determina la alineación vertical respecto a la coordenada y. Observa cómo las líneas de referencia ayudan a visualizar la alineación.

Medición de Texto

El método measureText() devuelve un objeto TextMetrics que contiene información sobre las dimensiones del texto. Esto es útil para calcular el ancho del texto para alineaciones personalizadas, crear marcos alrededor del texto, o implementar efectos como texto que sigue una curva.

El objeto TextMetrics incluye propiedades como width (ancho del texto), actualBoundingBoxLeft, actualBoundingBoxRight, actualBoundingBoxAscent, actualBoundingBoxDescent, entre otras. Estas propiedades te dan información precisa sobre el espacio que ocupará el texto.

Este ejemplo muestra cómo usar measureText() para obtener las dimensiones del texto. El ancho del texto es la propiedad más usada, pero las bounding boxes te dan información sobre la altura real del texto, incluyendo los ascendentes y descendentes de las letras.

• <strong>width</strong> - Ancho del texto en píxeles
• <strong>actualBoundingBoxLeft</strong> - Distancia desde la línea base al extremo izquierdo
• <strong>actualBoundingBoxRight</strong> - Distancia desde la línea base al extremo derecho
• <strong>actualBoundingBoxAscent</strong> - Distancia desde la línea base hacia arriba
• <strong>actualBoundingBoxDescent</strong> - Distancia desde la línea base hacia abajo