Texto no Canvas HTML

O elemento HTML5 <canvas> permite desenhar texto diretamente em uma superfície bitmap. Ao contrário do texto DOM comum, o texto no canvas é renderizado como pixels — uma vez desenhado, não possui marcação, não pode ser selecionado, copiado ou lido por leitores de tela, e nunca reflui. Você controla sua aparência por meio do contexto de desenho (getContext("2d")) e não com CSS, o que torna o texto no canvas ideal para gráficos, tabelas, interfaces de jogos e geração de imagens, mas uma má escolha para corpo de texto.

Este capítulo é baseado na introdução ao Canvas e nos fundamentos de desenho. Para colorir texto com gradientes, consulte Gradientes no Canvas.

Propriedades e Métodos

Propriedade / Método	Descrição
font	Retorna as configurações de fonte atuais e pode ser definido para alterar a fonte.
textAlign	Retorna as configurações de alinhamento de texto atuais e pode ser definido para alterar o alinhamento. A propriedade possui os seguintes valores: start, end, left, right e center. Observe que start e end dependem da direção do texto.
textBaseline	Retorna as configurações de alinhamento de linha de base atuais e pode ser definido para alterar o alinhamento da linha de base. A propriedade possui os seguintes valores: top, hanging, middle, alphabetic, ideographic e bottom.
fillStyle	Define a cor usada para preencher o texto.
strokeStyle	Define a cor usada para contornar o texto.
fillText(text, x, y [, maxWidth])	Desenha um texto preenchido na posição indicada pelas coordenadas x e y fornecidas. O argumento opcional `maxWidth` reduz o texto para que nunca ultrapasse essa largura em pixels.
strokeText(text, x, y [, maxWidth])	Contorna (delineia) o texto na posição indicada pelas coordenadas x e y fornecidas. Também aceita o argumento opcional `maxWidth`.
measureText(text)	Retorna um objeto `TextMetrics` cuja propriedade `width` informa a largura que o texto teria com a `font` atual. Útil para centralizar, quebrar ou ajustar o texto.

A propriedade `font`

A propriedade font aceita o mesmo valor que a abreviação CSS font. Você pode combinar estilo, peso, tamanho e família em uma única string, por exemplo "italic bold 18px serif". Se você definir apenas um tamanho e uma família (ex.: "30px Arial"), os outros valores voltam para seus padrões. Sempre inclua um tamanho e uma família — omitir qualquer um deles torna a declaração inválida e a alteração é ignorada.

ctx.font = "italic bold 18px serif";
ctx.font = "small-caps 24px 'Courier New', monospace";
ctx.font = "30px Arial"; // size + family only — also valid

Exemplo do método fillText():

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.font = "30px Arial";
      ctx.fillText("Hello World", 70, 80);
    </script>
  </body>
</html>

Experimente Você Mesmo »

Exemplo do método strokeText():

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="250" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.font = "27px Arial";
      ctx.strokeText("Canvas text", 40, 70);
    </script>
  </body>
</html>

Experimente Você Mesmo »

Exemplo de adição de cor e centralização de texto:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="400" height="250" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.font = "40px Comic Sans MS";
      ctx.fillStyle = "red";
      ctx.textAlign = "center";
      ctx.fillText("Canvas Text", canvas.width / 2, canvas.height / 2);
    </script>
  </body>
</html>

Experimente Você Mesmo »

Alinhando texto com textAlign

A coordenada x que você passa para fillText/strokeText é o ponto de ancoragem. A propriedade textAlign decide onde o texto é posicionado em relação a esse ponto. O padrão é "start", que segue a direção do texto — portanto, se comporta como "left" para textos da esquerda para a direita e como "right" para textos da direita para a esquerda. Com "left" o ponto de ancoragem é a borda esquerda; com "center" o texto é centralizado no ponto de ancoragem; com "right" o ponto de ancoragem é a borda direita; "start" e "end" mapeiam para as bordas de acordo com a direção do texto.

O exemplo abaixo desenha uma linha de referência vertical em x = 150, em seguida imprime três rótulos ancorados nesse mesmo x com diferentes valores de textAlign para que você possa ver como cada um posiciona o texto.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="160" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      const x = 150;

      // Reference line at the anchor x
      ctx.strokeStyle = "#d3d3d3";
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, 160);
      ctx.stroke();

      ctx.font = "20px Arial";
      ctx.fillStyle = "black";

      ctx.textAlign = "left";
      ctx.fillText("left", x, 40);

      ctx.textAlign = "center";
      ctx.fillText("center", x, 80);

      ctx.textAlign = "right";
      ctx.fillText("right", x, 120);
    </script>
  </body>
</html>

Posicionando texto verticalmente com textBaseline

A coordenada y é medida em relação à linha de base do texto, e textBaseline controla qual parte dos glifos essa linha de base se refere. O padrão é "alphabetic", onde y fica aproximadamente na parte inferior de letras como "x". Defina como "top" para que y seja o topo do texto, ou "middle" para centralizar o texto verticalmente em y — útil quando você quer o texto centralizado em uma caixa.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="320" height="120" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      const y = 60;

      // Reference line at the anchor y
      ctx.strokeStyle = "#d3d3d3";
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(320, y);
      ctx.stroke();

      ctx.font = "20px Arial";
      ctx.fillStyle = "black";

      ctx.textBaseline = "top";
      ctx.fillText("top", 10, y);

      ctx.textBaseline = "middle";
      ctx.fillText("middle", 90, y);

      ctx.textBaseline = "bottom";
      ctx.fillText("bottom", 200, y);
    </script>
  </body>
</html>

Texto com contorno e preenchimento (strokeText + fillText)

Você pode combinar preenchimento e contorno no mesmo texto para obter um efeito delineado. Chame fillText primeiro para aplicar a cor sólida, depois strokeText por cima para que o contorno fique nítido. Defina fillStyle, strokeStyle e lineWidth para controlar a aparência.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="360" height="120" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");

      ctx.font = "bold 60px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";

      const x = canvas.width / 2;
      const y = canvas.height / 2;

      ctx.fillStyle = "gold";
      ctx.fillText("Canvas", x, y);

      ctx.lineWidth = 2;
      ctx.strokeStyle = "black";
      ctx.strokeText("Canvas", x, y);
    </script>
  </body>
</html>

Medindo texto com measureText()

measureText() retorna um objeto TextMetrics descrevendo como o texto seria renderizado com a font atual. Sua propriedade width é a mais utilizada: você pode subtraí-la da largura do canvas para centralizar o texto manualmente, ou compará-la a uma largura disponível para quebrar um texto longo em múltiplas linhas.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="320" height="100" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      const text = "Measured!";

      ctx.font = "30px Arial";
      const metrics = ctx.measureText(text);

      // Center horizontally without changing textAlign
      const x = (canvas.width - metrics.width) / 2;
      ctx.fillText(text, x, 55);
    </script>
  </body>
</html>

Dica: quando você só precisa que o texto caiba em uma largura fixa, a opção mais simples é o argumento opcional maxWidth — ctx.fillText("Long label", 10, 40, 120) reduz o texto para que nunca ultrapasse 120 pixels.

Prática

O que o método 'fillText()' do canvas faz?

Ele contorna o texto usando o strokeStyle atual.Ele apenas mede a largura do texto especificado.Ele desenha o texto nas coordenadas fornecidas, preenchido com o fillStyle atual.Ele desenha o texto, mas nunca aplica nenhuma cor.Ele remove o texto do canvas.

Prática

Qual propriedade controla a posição horizontal do texto em relação à sua coordenada x?

Prática

O que measureText('Hello') retorna?

A string 'Hello' desenhada no canvas.Um objeto TextMetrics que inclui a largura do texto.O número de caracteres no texto.O tamanho atual da fonte em pixels.Nada - ele apenas define a fonte.

Prática

Qual valor é uma configuração válida para a propriedade 'font' do canvas?

Prática

Qual é o propósito do argumento opcional maxWidth de fillText()?

Ele define a largura do canvas.Ele reduz o texto para que sua largura renderizada não ultrapasse o valor fornecido.Ele altera o tamanho da fonte permanentemente.Ele quebra o texto em múltiplas linhas automaticamente.Ele centraliza o texto horizontalmente.

Propriedades e Métodos

A propriedade font

Exemplo do método fillText():

Exemplo do método strokeText():

Exemplo de adição de cor e centralização de texto:

Alinhando texto com textAlign

Posicionando texto verticalmente com textBaseline

Texto com contorno e preenchimento (strokeText + fillText)

Medindo texto com measureText()

Prática

A propriedade `font`