Los últimos tutoriales de desarrollo web
 

Texto HTML Canvas


Dibujo texto en el lienzo

Para dibujar texto en un lienzo, la propiedad y los métodos más importantes son:

  • font - define las propiedades de fuente para el texto
  • fillText( text,x,y ) - dibuja "filled" de texto en el lienzo
  • strokeText( text,x,y ) - dibuja texto en el lienzo (no fill)

Usando fillText()

Ejemplo

Establecer la fuente a 30px "Arial" y escribir un texto lleno en el lienzo:

Su navegador no soporta la etiqueta canvas de HTML5.

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
Inténtalo tú mismo "

Usando strokeText()

Ejemplo

Establecer la fuente a 30px "Arial" y escribir un texto, sin relleno, en el lienzo:

Su navegador no soporta la etiqueta canvas de HTML5.

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
Inténtalo tú mismo "

Añadir color y el Centro de texto

Ejemplo

Establecer la fuente a 30px "Comic Sans MS" y escribir un texto lleno de color rojo en el centro de la tela:

Su navegador no soporta la etiqueta canvas de HTML5.

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
Inténtalo tú mismo "