Texto en Canvas

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étodo	Descripción
font	Devuelve la configuración de fuente actual y se puede establecer para cambiar la fuente.
textAlign	Devuelve 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.
textBaseline	Devuelve 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.
fillStyle	Establece el color utilizado para rellenar el texto.
strokeStyle	Establece 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()

html

<!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>

Try it Yourself »

Ejemplo del método strokeText():

Ejemplo del método strokeText()

html

<!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>

Try it Yourself »

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

Ejemplo de adición de color y centrado de texto

html

<!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>

Try it Yourself »

Práctica

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

Solo muestra el texto en las coordenadas especificadas.Mide el ancho del texto especificado.Muestra el texto en las coordenadas especificadas y lo rellena con el fillStyle actual.Muestra el texto en las coordenadas especificadas sin opción de relleno.Hace que el texto desaparezca del canvas.

Texto en Canvas ​

Propiedades y métodos ​

Ejemplo del método fillText(): ​

Ejemplo del método strokeText(): ​

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

Práctica ​

Texto en Canvas

Propiedades y métodos

Ejemplo del método fillText():

Ejemplo del método strokeText():

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

Práctica