JavaScript Academy · Aula

Trabalhando com imagens e texto

Desenhe imagens e texto estilizado no canvas.

Trabalhando com imagens e texto é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Carregando uma imagem

O Canvas desenha a partir de um elemento de imagem HTML. Crie uma imagem, defina seu src e aguarde o carregamento antes de desenhar — os pixels não estarão disponíveis até então.

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "/logo.png";

Noções básicas de drawImage

drawImage(img, dx, dy) pinta a imagem na posição indicada, usando seu tamanho natural.

img.onload = () => {
  ctx.drawImage(img, 20, 20);
};

Redimensionando imagens

A forma com cinco argumentos, drawImage(img, dx, dy, dWidth, dHeight), redimensiona a imagem para caber em uma caixa de destino.

ctx.drawImage(img, 0, 0, 160, 90); // fit into 160x90

Recortando com um retângulo de origem

A forma com nove argumentos permite recortar: drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight). Os quatro primeiros descrevem o recorte da origem.

ctx.drawImage(img, 0, 0, 50, 50, 10, 10, 100, 100); // crop 50x50 → scale to 100x100

Desenhando texto preenchido

fillText(text, x, y) pinta o texto usando fillStyle. Por padrão, y indica a linha de base do texto.

ctx.fillStyle = "#2c3e50";
ctx.font = "24px sans-serif";
ctx.fillText("Hello Canvas", 20, 50);

Texto com contorno

strokeText(text, x, y) desenha apenas o contorno usando strokeStyle e lineWidth.

ctx.font = "40px bold serif";
ctx.lineWidth = 2;
ctx.strokeStyle = "navy";
ctx.strokeText("Outline", 20, 80);

A propriedade da fonte

font segue a forma abreviada do CSS: [style] [weight] size family. O tamanho e a família são obrigatórios.

ctx.font = "italic bold 28px Georgia, serif";

Alinhamento do texto

textAlign (start/end/left/right/center) define a ancoragem horizontal; textBaseline (top/middle/alphabetic/bottom) define a ancoragem vertical em torno do ponto indicado.

ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Centered", canvas.width / 2, canvas.height / 2);

Medindo o texto

measureText(text) retorna um objeto TextMetrics. Sua width informa a largura que o texto terá ao ser desenhado — algo essencial para o layout e a quebra de linhas.

const m = ctx.measureText("How wide?");
console.log(m.width); // pixels

Quebra simples de palavras

Combine measureText com um laço para distribuir sequências longas em várias linhas.

function wrap(ctx, text, x, y, maxW, lh) {
  let line = "";
  for (const word of text.split(" ")) {
    const test = line + word + " ";
    if (ctx.measureText(test).width > maxW && line) {
      ctx.fillText(line, x, y);
      line = word + " ";
      y += lh;
    } else {
      line = test;
    }
  }
  ctx.fillText(line, x, y);
}

Sombras para dar profundidade

As propriedades de sombra se aplicam a formas, imagens e texto: shadowColor, shadowBlur, shadowOffsetX/Y.

ctx.shadowColor = "rgba(0,0,0,0.4)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText("With shadow", 20, 60);

Verificação rápida

Avalie seu conhecimento sobre o desenho de imagens e texto.

Recapitulação: imagens e texto

Você aprendeu a carregar imagens e desenhá-las com redimensionamento e recorte por meio de drawImage, renderizar texto com fillText/strokeText, definir font, alinhar o texto, medir larguras com measureText e adicionar sombras. A seguir: animação.

Perguntas Frequentes

A aula “Trabalhando com imagens e texto” é grátis?

Sim — o texto completo de “Trabalhando com imagens e texto” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Trabalhando com imagens e texto”?

Desenhe imagens e texto estilizado no canvas. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Trabalhando com imagens e texto”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy