Texto e imágenes en canvas

Establezca la fuente: ctx.font = "bold 24px sans-serif". Dibuje con: ctx.fillText("Hello", x, y) o ctx.strokeText("Hello", x, y). La coordenada y es la línea base del texto; añada la altura de los ascendentes por encima de ella para colocar correctamente el texto dentro de un cuadro delimitador.

ctx.textAlign controla la alineación horizontal: "left" (predeterminada), "center", "right". ctx.textBaseline controla la alineación vertical con respecto a y: "top", "middle", "alphabetic" (predeterminada), "bottom". Para centrar el texto, establezca ambos valores en "center" y "middle".

ctx.measureText("text") devuelve un objeto TextMetrics con el ancho y las métricas de la fuente. Úselo para calcular dinámicamente las posiciones del texto: centrarlo en un cuadro, ajustar el texto a un ancho máximo o alinear etiquetas a la derecha junto a puntos de datos.

Canvas no incluye ajuste de línea de texto. Impleméntelo midiendo el ancho de las palabras y acumulándolas hasta superar maxWidth; después, comience una nueva línea con intervalos de lineHeight. Esta es una función de utilidad habitual en las bibliotecas de renderizado de canvas.

ctx.drawImage(image, dx, dy) dibuja un HTMLImageElement, HTMLCanvasElement o HTMLVideoElement en (dx, dy). Cargue primero la imagen y dibújela en su controlador onload para asegurarse de que los píxeles estén disponibles antes de dibujar.

ctx.drawImage(image, dx, dy, dw, dh) escala la imagen para ajustarla a dw x dh. La conservación de la relación de aspecto no es automática; calcule las dimensiones manualmente. Para conservarla: dw = img.width * scale; dh = img.height * scale.

La versión de nueve argumentos de drawImage es: ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh). El rectángulo de origen (sx, sy, sw, sh) recorta una parte de la imagen; el rectángulo de destino (dx, dy, dw, dh) coloca y escala ese recorte en el canvas.

ctx.imageSmoothingEnabled = false desactiva la interpolación bilineal al escalar imágenes. Úselo para pixel art cuando se desee un escalado nítido y sin suavizado. Déjelo activado (valor predeterminado) para imágenes fotográficas, en las que el escalado suave ofrece mejores resultados.

Pase un canvas como fuente a drawImage para renderizar un canvas sobre otro. Esto permite el renderizado fuera de pantalla: dibuje composiciones complejas en un canvas oculto y, después, dibuje ese canvas sobre el visible en una sola operación por fotograma.

ctx.globalAlpha (de 0 a 1) aplica una transparencia uniforme a todos los dibujos posteriores. ctx.globalCompositeOperation controla cómo se combinan los dibujos nuevos con los píxeles existentes: "source-over" (predeterminado), "multiply", "screen", "destination-out" (borrar), entre otros.

canvas.toDataURL("image/png") exporta el canvas como una URL de datos PNG codificada en base64. Úselo para una descarga iniciada por el usuario: cree un ancla, establezca href en la URL de datos y el atributo download en un nombre de archivo y, después, haga clic en ella mediante programación.

¿Qué efecto tiene ctx.textBaseline = "middle" al dibujar texto?

El renderizado de texto en canvas utiliza ctx.font, fillText/strokeText, textAlign y textBaseline para el posicionamiento, y measureText para los cálculos de maquetación. El dibujo de imágenes mediante drawImage admite escalado y recorte; globalAlpha y globalCompositeOperation controlan la composición. toDataURL exporta el canvas para descargarlo o utilizarlo posteriormente.