HTML5: Alinhamento de Texto no Canvas

Já vimos uma vez que podemos inserir textos em uma Canvas, mas eu só mostrei como mudar a fonte e como usar os métodos fillText e strokeText. Mas suponhamos que você queira que o seu texto fique exatamente no centro da Canvas, como faria isso?

Isso não é complicado. Podemos alterar a linha base do texto para deixar no meio. Então, a posição y que indicamos nos métodos fillText ou strokeText vai estar indicando o meio da imagem quanto a posição vertical.



ctx.textBaseline="middle";
ctx.fillText("Hello World",400,300);

No código acima, o texto será posicionado no eixo y na posição 300, mas significa que metade do caracter vai ficar acima e a outra metade, abaixo. Outros valores possíveis além do "middle" são: top (a linha base fica no topo), bottom (a linha base fica embaixo dos caracteres) e alphabetic (a linha base fica embaixo dos caracteres, entretanto, os caracteres que são escritos abaixo da linha, como a letra p, fica com essa parte abaixo dessa mesma linha). A imagem abaixo mostra a ideia:

Fonte: http://www.whatwg.org/

Como podem ver, a imagem especifica outros valores, mas por enquanto, poucos navegadores os implementam.

Bem, isso resolve o problema quanto o posicionamento vertical, mas e o horizontal? Tão simples quanto ao vertical, só que vamos estar mexendo com o alinhamento do texto. Vamos adicionar mais uma linha no código, vou colocar no início:

ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.fillText("Hello World",400,300);

Então, colocamos no atributo textAlign o valor "center". Agora o nosso texto vai estar totalmente centralizado em relação ao ponto (400,300). Se a sua Canvas tem 800x600, esse texto vai estar totalmente centralizado. Outros valores possíveis: left (a esquerda do ponto), right (a direita do ponto), start (ao início da linha, que pode variar de acordo com o idioma, por exemplo, árabe o início da linha fica ao lado direito), end (ao fim da linha, mesmo caso do que o start).