Canvas API: Como Desenhar Texto

Além de desenhar formas geométricas e imagens, o canvas permite exibir texto. Para isso, primeiramente é necessário definir a propriedade font no contexto do canvas:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "22px Verdana";

A propriedade font define o estilo da fonte. No exemplo acima, a fonte usada é "Verdana" com um tamanho de 22 pixels. Você pode usar fontes padrão disponíveis no sistema.

Para exibir o texto, são utilizados dois métodos:

fillText(text, x, y): Recebe três parâmetros: o texto a ser exibido (parâmetro text) e as coordenadas do ponto de origem do texto (x e y).
strokeText(text, x, y): Recebe os mesmos parâmetros.

A diferença entre os dois métodos está no modo como o texto é desenhado. O método fillText() usa a cor de preenchimento da forma (definida pela propriedade fillStyle) para colorir o interior dos caracteres. Já o método strokeText() utiliza a cor da borda da forma (definida pela propriedade strokeStyle) para desenhar o contorno dos caracteres.

Exemplo de uso do fillText() para exibir texto:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Exemplo de Texto no Canvas</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="250"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      context.font = "30px Verdana";
      context.fillStyle = "navy"; // define a cor do texto
      context.fillText("Hello Programício", 20, 50);
    </script>
  </body>
</html>

Exibindo texto no canvas com o método fillText em JavaScript

Exemplo de uso do strokeText() para exibir texto com contorno:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "30px Verdana";
context.strokeStyle = "navy"; // define a cor do contorno
context.strokeText("Hello Programício", 20, 50);

Exibindo texto no canvas com o método strokeText em JavaScript

Propriedade textAlign

A propriedade textAlign permite alinhar o texto em relação a um ponto de referência. Ela pode assumir os seguintes valores:

left: O texto começa na posição especificada.
right: O texto termina antes da posição especificada.
center: O texto é centralizado em relação à posição especificada.
start: Valor padrão, o texto começa na posição especificada.
end: O texto termina antes da posição especificada.

var canvas = document.getElementById("myCanvas"),
  context = canvas.getContext("2d");
context.font = "22px Verdana";
context.textAlign = "right";
context.fillText("Right Text", 120, 30);
context.textAlign = "left";
context.fillText("Left Text", 120, 60);
context.textAlign = "center";
context.fillText("Center Text", 120, 90);
context.textAlign = "start";
context.fillText("Start Text", 120, 120);
context.textAlign = "end";
context.fillText("End Text", 120, 150);

Exibindo texto no canvas com a propriedade textAlign em JavaScript

A diferença entre os valores start e left é que o primeiro é o valor padrão e o segundo é usado para compatibilidade com idiomas que são lidos da direita para a esquerda.

Propriedade textBaseline

A propriedade textBaseline define o alinhamento vertical do texto em relação à linha base. Os valores possíveis são:

top
middle
bottom
alphabetic
hanging
ideographic

Exemplo de uso da propriedade textBaseline:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "22px Verdana";
context.textBaseline = "top";
context.fillText("Top", 10, 100);
context.textBaseline = "bottom";
context.fillText("Bottom", 45, 100);
context.textBaseline = "middle";
context.fillText("Middle", 130, 100);
context.textBaseline = "alphabetic";
context.fillText("Alphabetic", 205, 100);
context.textBaseline = "hanging";
context.fillText("Hanging", 320, 100);

Exibindo texto no canvas com a propriedade textBaseline em JavaScript

Determinando a largura do texto

Para medir a largura do texto que será exibido no canvas, pode-se utilizar o método measureText():

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "18px Verdana";
const text = context.measureText("Hello JavaScript");
console.log(text.width);