Texto en Canvas con HTML

El elemento HTML5 <canvas> permite dibujar texto directamente sobre una superficie de mapa de bits. A diferencia del texto DOM convencional, el texto en canvas se pinta como píxeles — una vez dibujado, no tiene marcado, no puede seleccionarse, copiarse ni ser leído por lectores de pantalla, y nunca se redistribuye. Su aspecto se controla mediante el contexto de dibujo (getContext("2d")) en lugar de con CSS, lo que hace que el texto en canvas sea ideal para gráficos, diagramas, interfaces de juegos y generación de imágenes, pero una mala opción para el cuerpo del texto.

Este capítulo se basa en la introducción a Canvas y en los fundamentos de dibujo. Para colorear texto con degradados, consulta Degradados en Canvas.

Propiedades y métodos

Propiedad / Método	Descripción
font	Devuelve la configuración de fuente actual y puede establecerse para cambiarla.
textAlign	Devuelve la configuración de alineación de texto actual y puede establecerse para cambiarla. La propiedad acepta los siguientes valores: start, end, left, right y center. Ten en cuenta que start y end dependen de la dirección del texto.
textBaseline	Devuelve la configuración de alineación de línea base actual y puede establecerse para cambiarla. La propiedad acepta los siguientes valores: top, hanging, middle, alphabetic, ideographic y bottom.
fillStyle	Establece el color usado para rellenar el texto.
strokeStyle	Establece el color usado para trazar el contorno del texto.
fillText(text, x, y [, maxWidth])	Dibuja texto relleno en la posición indicada por las coordenadas x e y. El argumento opcional `maxWidth` reduce el texto para que nunca supere ese ancho en píxeles.
strokeText(text, x, y [, maxWidth])	Traza (contornea) el texto en la posición indicada por las coordenadas x e y. También acepta el argumento opcional `maxWidth`.
measureText(text)	Devuelve un objeto `TextMetrics` cuya propiedad `width` indica el ancho que tendría el texto con la `font` actual. Útil para centrar, ajustar o encajar texto.

La propiedad `font`

La propiedad font acepta el mismo valor que la propiedad abreviada CSS font. Puedes combinar estilo, peso, tamaño y familia en una sola cadena, por ejemplo "italic bold 18px serif". Si solo estableces un tamaño y una familia (p. ej. "30px Arial"), los demás valores recurren a sus valores por defecto. Incluye siempre un tamaño y una familia — omitir cualquiera de ellos hace que la declaración sea inválida y el cambio se ignore.

ctx.font = "italic bold 18px serif";
ctx.font = "small-caps 24px 'Courier New', monospace";
ctx.font = "30px Arial"; // size + family only — also valid

Ejemplo del método fillText():

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.font = "30px Arial";
      ctx.fillText("Hello World", 70, 80);
    </script>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo del método strokeText():

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="250" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.font = "27px Arial";
      ctx.strokeText("Canvas text", 40, 70);
    </script>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de cómo añadir color y centrar texto:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="400" height="250" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.font = "40px Comic Sans MS";
      ctx.fillStyle = "red";
      ctx.textAlign = "center";
      ctx.fillText("Canvas Text", canvas.width / 2, canvas.height / 2);
    </script>
  </body>
</html>

Pruébalo tú mismo »

Alinear texto con textAlign

La coordenada x que se pasa a fillText/strokeText es el punto de anclaje. La propiedad textAlign decide dónde se sitúa el texto en relación con ese anclaje. El valor por defecto es "start", que sigue la dirección del texto — por lo que se comporta como "left" para textos de izquierda a derecha y como "right" para textos de derecha a izquierda. Con "left" el anclaje es el borde izquierdo; con "center" el texto se centra sobre el anclaje; con "right" el anclaje es el borde derecho; "start" y "end" se corresponden con los bordes según la dirección del texto.

El ejemplo siguiente dibuja una línea de referencia vertical en x = 150 y luego escribe tres etiquetas ancladas a ese mismo x con diferentes valores de textAlign para que puedas ver cómo posiciona el texto cada uno.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="160" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      const x = 150;

      // Reference line at the anchor x
      ctx.strokeStyle = "#d3d3d3";
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, 160);
      ctx.stroke();

      ctx.font = "20px Arial";
      ctx.fillStyle = "black";

      ctx.textAlign = "left";
      ctx.fillText("left", x, 40);

      ctx.textAlign = "center";
      ctx.fillText("center", x, 80);

      ctx.textAlign = "right";
      ctx.fillText("right", x, 120);
    </script>
  </body>
</html>

Posicionar texto verticalmente con textBaseline

La coordenada y se mide respecto a la línea base del texto, y textBaseline controla qué parte de los glifos representa esa línea base. El valor por defecto es "alphabetic", donde y se sitúa aproximadamente en la parte inferior de letras como "x". Establécelo en "top" para que y sea la parte superior del texto, o en "middle" para centrar verticalmente el texto sobre y — muy útil cuando quieres centrar el texto dentro de un cuadro.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="320" height="120" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      const y = 60;

      // Reference line at the anchor y
      ctx.strokeStyle = "#d3d3d3";
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(320, y);
      ctx.stroke();

      ctx.font = "20px Arial";
      ctx.fillStyle = "black";

      ctx.textBaseline = "top";
      ctx.fillText("top", 10, y);

      ctx.textBaseline = "middle";
      ctx.fillText("middle", 90, y);

      ctx.textBaseline = "bottom";
      ctx.fillText("bottom", 200, y);
    </script>
  </body>
</html>

Texto con contorno y relleno (strokeText + fillText)

Puedes combinar un relleno y un contorno sobre el mismo texto para obtener un efecto de texto delineado. Llama primero a fillText para aplicar el color sólido y luego a strokeText por encima para que el contorno quede nítido. Usa fillStyle, strokeStyle y lineWidth para controlar el aspecto.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="360" height="120" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");

      ctx.font = "bold 60px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";

      const x = canvas.width / 2;
      const y = canvas.height / 2;

      ctx.fillStyle = "gold";
      ctx.fillText("Canvas", x, y);

      ctx.lineWidth = 2;
      ctx.strokeStyle = "black";
      ctx.strokeText("Canvas", x, y);
    </script>
  </body>
</html>

Medir texto con measureText()

measureText() devuelve un objeto TextMetrics que describe cómo se renderizaría el texto con la font actual. Su propiedad width es la más usada: puedes restarla al ancho del canvas para centrar el texto manualmente, o compararla con un ancho disponible para dividir texto largo en varias líneas.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="320" height="100" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      const text = "Measured!";

      ctx.font = "30px Arial";
      const metrics = ctx.measureText(text);

      // Center horizontally without changing textAlign
      const x = (canvas.width - metrics.width) / 2;
      ctx.fillText(text, x, 55);
    </script>
  </body>
</html>

Consejo: cuando solo necesitas que el texto quepa en un ancho fijo, la opción más sencilla es el argumento opcional maxWidth — ctx.fillText("Long label", 10, 40, 120) reduce el texto para que nunca supere los 120 píxeles.

Práctica

¿Qué hace el método 'fillText()' del canvas?

Contornea el texto usando el strokeStyle actual.Solo mide el ancho del texto especificado.Dibuja el texto en las coordenadas dadas, relleno con el fillStyle actual.Dibuja el texto pero nunca aplica ningún color.Elimina el texto del canvas.

Práctica

¿Qué propiedad controla la posición horizontal del texto respecto a su coordenada x?

Práctica

¿Qué devuelve measureText('Hello')?

La cadena 'Hello' dibujada en el canvas.Un objeto TextMetrics que incluye el ancho del texto.El número de caracteres del texto.El tamaño de fuente actual en píxeles.Nada: solo establece la fuente.

Práctica

¿Cuál es un valor válido para la propiedad 'font' del canvas?

Práctica

¿Cuál es el propósito del argumento opcional maxWidth de fillText()?

Establece el ancho del canvas.Reduce el texto para que su ancho renderizado no supere el valor indicado.Cambia el tamaño de fuente de forma permanente.Divide el texto en varias líneas automáticamente.Centra el texto horizontalmente.

Propiedades y métodos

La propiedad font

Ejemplo del método fillText():

Ejemplo del método strokeText():

Ejemplo de cómo añadir color y centrar texto:

Alinear texto con textAlign

Posicionar texto verticalmente con textBaseline

Texto con contorno y relleno (strokeText + fillText)

Medir texto con measureText()

Práctica

La propiedad `font`