Como Desenhar Textos - Escrevendo no Canvas

Neste tutorial de Canvas, vamos aprender como fazer textos e escrever no canvas.

Baixar Apostila de JavaScript (em PDF)

Textos no Canvas: fillText()

Muitas vezes, é preciso escrever textos em nossos gráficos, como em legendas ou títulos.

E sim, temos que literalmente desenhar os textos no Canvas.

Ele no permite diversas estilizações, como escolher tamanho, fonte, cor, espessura de linha etc, como veremos ao longo deste tutorial de Canvas.

Alguns métodos nos ajudam bastante com esse trabalho no canvas, o principal dele é o fillText, que tem a seguinte sintaxe:

fillText( String, x, y)

String - Texto que você deseja
(x,y) - Coordenadas de onde vai se localizar a String

Vamos fazer o "Olá, Mundo" em Canvas, localizado no centro de nosso canvas.

O código HTM + JS fica:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
 </head>
 <body>
  <canvas id = "meuCanvas" width = "600" height = "400"
      style = "border: 1px solid black;">
  O Canvas não está ativado em seu Browser
 </canvas>
 <script type="text/javascript">
  var canvas = document.getElementById('meuCanvas');
  var contexto = canvas.getContext('2d');

     contexto.fillText("Olá, mundo!", 300, 200);
 </script>
 </body>
</html>

Ao invés de fillText, experimente usar strokeText. Experimente e tente notar alguma diferença.

Mais na frente, neste mesmo tutorial, falaremos mais da diferença.

Alinhamento de texto: Atributos textBaseline e textAlign

Agora vamos começar a aprender a estilizar nossos textos em Canvas.

O atributo textBaseline especifica a linha de base do alinhamento. Ela pode receber os seguintes valores:

top - Topo do quadrado
hanging - Linha de base 'suspensa'
middle - Meio do quadrado
alphabetic - Valor padrão, linha de base alfabética
ideographic - Linha de base ideográfica
bottom - Parte inferior do quadrado

Já o atributo textAlign especifica onde o texto vai ficar alinhado e pode receber os valores:

center - Centralizado
end - Final da linha
left - Esquerda
right - Direita
start - Início (padrão)

Estilizando textos em Canvas: font

Uma das vantagens de usar textos em canvas é a capacidade que temos de estilizar nossas strings.

Podemos usar o atributo que já conhecemos, o fillStyle para selecionar a cor que desejarmos.

Mas um outro atributo muito importante é o font. Ele recebe uma string com o tamanho da fonte, o tipo e se ela possui alguma estilização (como itálico).

Por exemplo, uma fonte de 20px de tamanho do tipo Serif:

contexto.font = "20px serif";

Uma fonte do tipo Arial, de tamanho 22px em itálico:

context.font = "italic 22px Arial";

Uma fonte Sans-Serif, de tamanho 30px e em negrito:

context.font = "bold 30px sans-serif";

Ou seja, a sintaxe é a mesma do CSS (por isso é importante estudar HTML+CSS antes ou durante seus estudos de JavaScript - ajuda muito mesmo, muito recomendável - e é moleza em relação ao nosso JS).

Diferença do fillText e strokeText

O fill serve para escrever textos preenchidos, 'pintados' por dentro.

Já o stroke é somente o traço, ou seja, o contorno.

Vamos fazer um exemplo com letras bem grandes pra você entender.

Usaremos uma fonte de tamanho 100px, do tipo Arial e espessura 4:

contexto.font='100px arial';
contexto.lineWidth=4;

Agora vamos fazer uma letra J com fill, na cor azul.

Em seguida, fazemos a segunda letra J, só com stroke na cor verde.

Por fim, fazemos as duas, uma dentro da outra.

Teste esse código:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
 </head>
 <body>
  <canvas id = "meuCanvas" width = "600" height = "400"
      style = "border: 1px solid black;">
  O Canvas não está ativado em seu Browser
 </canvas>
 <script type="text/javascript">
  var canvas = document.getElementById('meuCanvas');
  var contexto = canvas.getContext('2d');

  contexto.font='100px arial';
  contexto.lineWidth=4;

  //Primeiro Q, preenchido de azul
     contexto.fillStyle='blue';
  contexto.fillText('J',50,150);

  //Segundo Q, com stroke (traço) verde
  contexto.strokeStyle='green'
  contexto.strokeText('J',125,150);

  //Unindo os dois
  contexto.fillText('J',200,150); 
  contexto.strokeText('J',200,150); 
 </script>
 </body>
</html>

O resultado:

O primeiro J é com fillText, o segundo é com strokeText e o último o efeito dos dois juntos.

Basta lembrar que fill em inglês é preenchimento, preencher. Já stroke é traço.

Mais informação sobre os possíveis atributos e valores:
https://www.w3schools.com/tags/canvas_font.asp

JavaScript Progressivo