Texto e imagens no Canvas

Defina a fonte: ctx.font = "bold 24px sans-serif". Desenhe com: ctx.fillText("Hello", x, y) ou ctx.strokeText("Hello", x, y). A coordenada y é a linha de base do texto — adicione a altura ascendente acima dela para posicionar o texto corretamente dentro de uma caixa delimitadora.

ctx.textAlign controla o alinhamento horizontal: "left" (padrão), "center", "right". ctx.textBaseline controla o alinhamento vertical em relação a y: "top", "middle", "alphabetic" (padrão), "bottom". Para centralizar o texto, defina ambos como "center" e "middle".

ctx.measureText("text") retorna um objeto TextMetrics com a largura e as métricas da fonte. Use-o para calcular dinamicamente as posições do texto — centralizar o texto em uma caixa, quebrá-lo em uma largura máxima ou alinhar rótulos à direita junto aos pontos de dados.

A tela não oferece quebra de texto integrada. Implemente-a: meça a largura das palavras, acumule-as até ultrapassar maxWidth e então passe para uma nova linha em intervalos de lineHeight. Essa é uma função utilitária comum em bibliotecas de renderização para telas.

ctx.drawImage(image, dx, dy) desenha um HTMLImageElement, HTMLCanvasElement ou HTMLVideoElement em (dx, dy). Carregue a imagem primeiro e desenhe no manipulador onload para garantir que os pixels estejam disponíveis antes do desenho.

ctx.drawImage(image, dx, dy, dw, dh) redimensiona a imagem para caber em dw x dh. A preservação da proporção não é automática — calcule as dimensões manualmente. Para preservar a proporção: dw = img.width * scale; dh = img.height * scale.

drawImage com nove argumentos: ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh). O retângulo de origem (sx, sy, sw, sh) recorta a imagem; o retângulo de destino (dx, dy, dw, dh) posiciona e redimensiona o recorte na tela.

ctx.imageSmoothingEnabled = false desativa a interpolação bilinear ao redimensionar imagens. Use-o para arte em pixels quando desejar um redimensionamento nítido e sem suavização. Deixe-o ativado (padrão) para imagens fotográficas, nas quais o redimensionamento suave tem melhor aparência.

Passe uma tela como origem para drawImage — renderizando uma tela sobre outra. Isso permite a renderização fora da tela: desenhe composições complexas em uma tela oculta e depois desenhe essa tela na tela visível em uma única operação a cada quadro.

ctx.globalAlpha (de 0 a 1) aplica transparência uniforme a todos os desenhos subsequentes. ctx.globalCompositeOperation controla como os novos desenhos se misturam aos pixels existentes: "source-over" (padrão), "multiply", "screen", "destination-out" (apagar) e outros.

canvas.toDataURL("image/png") exporta a tela como uma URL de dados PNG em base64. Use-a para um download iniciado pelo usuário: crie uma âncora, defina href como a URL de dados e o atributo download como um nome de arquivo e então clique nela programaticamente.

O que ctx.textBaseline = "middle" afeta ao desenhar texto?

A renderização de texto na tela usa ctx.font, fillText/strokeText, textAlign e textBaseline para posicionamento, além de measureText para cálculos de disposição. O desenho de imagens com drawImage permite redimensionamento e recorte; globalAlpha e globalCompositeOperation controlam a mistura. toDataURL exporta a tela para download ou uso posterior.