Texto da tela HTML
Texto de desenho na tela
Para desenhar texto em uma tela, a propriedade e os métodos mais importantes são:
- font - define as propriedades da fonte para o texto
- fillText( text,x,y ) - desenha o texto "preenchido" na tela
- strokeText( text,x,y ) - desenha texto na tela (sem preenchimento)
Usando fillText()
Exemplo
Defina a fonte para 30px "Arial" e escreva um texto preenchido na tela:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Usando strokeText()
Exemplo
Defina a fonte para 30px "Arial" e escreva um texto, sem preenchimento, na tela:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Adicionar cor e centralizar texto
Exemplo
Defina a fonte para 30px "Comic Sans MS" e escreva um texto vermelho preenchido no centro da tela:
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);