Texto no Canvas HTML

Desenhar texto na tela

As propriedades e métodos mais importantes para desenhar texto na tela são:

• font - Define as propriedades da fonte do texto
• fillText(text,x,y) - Desenhar "texto preenchido" na tela
• strokeText(text,x,y) - Desenhar texto na tela (sem preenchimento)

Usar fillText()

Exemplo

Defina a fonte como "30px Arial" e escreva o texto preenchido na tela:

JavaScript:

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

Experimente pessoalmente

Usar strokeText()

Exemplo

Defina a fonte como "30px Arial" e escreva o texto na tela sem preenchimento:

JavaScript:

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

Experimente pessoalmente

Adicionar cor e alinhar o texto no centro

Exemplo

Defina a fonte como "30px Comic Sans MS" e escreva o texto preenchido no centro da tela:

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);

Experimente pessoalmente

Veja também:

Manual Completo do Canvas no CodeW3C.com