Drawing text
Após entender como aplicar estilos e cores no capítulo anterior, nós veremos agora como desenhar texto dentro do contexto de uma canvas.
Desenhando texto
O context de renderização da canvas fornece dois métodos para renderização textual:
fillText(text, x, y [, maxWidth])
-
Preenche com um determinado texto as cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.
strokeText(text, x, y [, maxWidth])
-
Traçeja um determinado texto nas cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.
Um exemplo com fillText
O texto a seguir é rederizado utilizando fillStyle
.
function draw() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
}
Um exemplo com strokeText
O texto é preenchido usando o strokeStyle atual.
function draw() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "48px serif";
ctx.strokeText("Hello world", 10, 50);
}
Estilo de Texto
Nos exemplos anteriores, já usamos a propriedade font para tornar o texto um pouco maior que o tamanho padrão. Existem mais algumas propriedades que permitem ajustar a maneira como o texto é exibido no canvas:
font = value
-
The current text style being used when drawing text. This string uses the same syntax as the CSS
font
property. The default font is 10px sans-serif. textAlign = value
-
Text alignment setting. Possible values:
start
,end
,left
,right
orcenter
. The default value isstart
. textBaseline = value
-
Baseline alignment setting. Possible values:
top
,hanging
,middle
,alphabetic
,ideographic
,bottom
. The default value isalphabetic
. direction = value
-
Directionality. Possible values:
ltr
,rtl
,inherit
. The default value isinherit
.
Essas propriedades podem ser similares para você, se você trabalhou com CSS antes.
O diagrama seguinte do WHATWG demonstra as várias baselines suportadas pela propriedade do textBaseline
O exemplo de uma textBaseline
Edite o código abaixo e veja as atualizações em tempo real no canvas.
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);
Advanced text measurements
In the case you need to obtain more details about the text, the following method allows you to measure it.
measureText()
-
Returns a
TextMetrics
object containing the width, in pixels, that the specified text will be when drawn in the current text style.
The following code snippet shows how you can measure a text and get its width.
function draw() {
var ctx = document.getElementById("canvas").getContext("2d");
var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
}
Notas específicas - Gecko
No Gecko (a engine de renderização do Firefox, Firefox OS e outras aplicações Mozilla), algumas APIs prefixadas foram implementadas em versões anteriores para escrever texto em um canvas. Essas APIs agora estão depreciadas e removidas, e não são mais garantidas para uso.