Texto de Canvas HTML

Dibujar texto en la lienzo

Las propiedades y métodos más importantes para dibujar texto en la lienzo son:

• font - Definir las propiedades de la fuente del texto
• fillText(text,x,y) - Dibujar "texto relleno" en la lienzo
• strokeText(text,x,y) - Dibujar texto en la lienzo (sin relleno)

Usar fillText()

Ejemplo

Establezca la fuente a "30px Arial" y escriba texto relleno en la lienzo:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Pruebe por su cuenta

Usar strokeText()

Ejemplo

Establezca la fuente a "30px Arial" y escriba texto en la lienzo (sin relleno):

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

Pruebe por su cuenta

Añadir color y alinear texto

Ejemplo

Establezca la fuente a "30px Comic Sans MS" y escriba texto relleno en el centro de la lienzo:

JavaScript:

const canvas = document.getElementById("myCanvas");
const 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);

Pruebe por su cuenta

Vea también:

Manual de referencia completo de Canvas en CodeW3C.com