W3docs
es
Iniciar sesión

Texto en Canvas

HTML5 canvas allows creating text using font and text properties. See examples of the fillText, strokeText properties, and example of adding color and centering text.

El canvas de HTML5 permite crear texto utilizando diferentes propiedades de fuente y texto que se presentan a continuación:

Propiedades y métodos

Propiedad / MétodoDescripción
fontDevuelve la configuración de fuente actual y se puede establecer para cambiar la fuente.
textAlignDevuelve la configuración de alineación de texto actual y se puede establecer para cambiar la alineación. La propiedad tiene los siguientes valores: start, end, left, right y center. Tenga en cuenta que start y end dependen de la dirección del texto.
textBaselineDevuelve la configuración de alineación de la línea base actual y se puede establecer para cambiar la alineación de la línea base. La propiedad tiene los siguientes valores: top, hanging, middle, alphabetic, ideographic y bottom.
fillStyleEstablece el color utilizado para rellenar el texto.
strokeStyleEstablece el color utilizado para trazar el texto.
fillText(text, x, y)Dibuja un texto relleno en la posición indicada por las coordenadas x e y proporcionadas.
strokeText(text, x, y)Traza el texto en la posición indicada por las coordenadas x e y proporcionadas.

Ejemplo del método fillText():

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>
      var canvas = document.getElementById("exampleCanvas");
      var 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():

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>
      var canvas = document.getElementById("exampleCanvas");
      var ctx = canvas.getContext("2d");
      ctx.font = "27px Arial";
      ctx.strokeText("Canvas text", 40, 70);
    </script>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de adición de color y centrado de texto:

Ejemplo de adición de color y centrado de 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>
      var canvas = document.getElementById("exampleCanvas");
      var 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 »

Práctica

Práctica

¿Cuál es la funcionalidad del método 'fillText()' del canvas de HTML5 en relación con el texto?