JavaScript Academy · Aula

Configurando o contexto do Canvas

Obtenha e configure o contexto de renderização 2D.

Configurando o contexto do Canvas é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 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.

O que é a API do Canvas

A API do Canvas permite desenhar gráficos 2D com JavaScript em um elemento <canvas>. Você obtém uma superfície de desenho formada por pixels e um conjunto de comandos para pintar formas, imagens e texto.

A marcação consiste em uma única tag <canvas>.
Todo o desenho acontece em JavaScript por meio de um objeto de contexto.

<canvas id="board" width="320" height="200"></canvas>

Obtendo o contexto

Chame getContext('2d') no elemento canvas para obter um CanvasRenderingContext2D. Todo comando de desenho passa por esse objeto.

const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
console.log(ctx.constructor.name); // CanvasRenderingContext2D

O sistema de coordenadas

A origem (0, 0) fica no canto superior esquerdo. X aumenta para a direita e Y aumenta para baixo. Um canvas de 320x200 tem o canto inferior direito em (320, 200).

Atributos de largura e altura

Os atributos HTML width e height definem o tamanho da área de desenho em pixels. Se forem omitidos, o padrão é 300x150. Defini-los em JS também limpa o canvas.

const canvas = document.getElementById("board");
canvas.width = 400;
canvas.height = 300;
console.log(canvas.width, canvas.height); // 400 300

Tamanho do CSS versus tamanho da área de desenho

width/height do CSS esticam o canvas na tela, mas NÃO alteram a área de pixels. Se forem diferentes dos atributos, os desenhos ficarão borrados ou esticados. Mantenha-os sincronizados para obter um resultado nítido.

canvas.width = 400;  // buffer pixels
canvas.style.width = "400px"; // display size — match it

Lidando com telas de alto DPI

Em telas de alta densidade, devicePixelRatio costuma ser 2. Aumente a área de pixels e reduza o contexto proporcionalmente para manter as linhas nítidas.

const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = "400px";
canvas.style.height = "300px";
ctx.scale(dpr, dpr);

Definindo estilos de preenchimento e contorno

O estado do desenho fica no contexto. fillStyle define a cor de preenchimento, e strokeStyle define a cor do contorno. Eles aceitam qualquer sequência de cor do CSS.

ctx.fillStyle = "#3498db";
ctx.strokeStyle = "rgba(231, 76, 60, 0.8)";
ctx.lineWidth = 4;

Seu primeiro desenho

Com o contexto pronto, você pode pintar imediatamente. fillRect(x, y, w, h) pinta um retângulo preenchido usando o fillStyle atual.

const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 150, 80);

Limpando o canvas

clearRect(x, y, w, h) apaga uma região retangular, tornando-a transparente. Limpar toda a área de pixels costuma ser o primeiro passo de cada quadro de animação.

ctx.clearRect(0, 0, canvas.width, canvas.height);

Salvando e restaurando o estado

save() coloca o estilo/a transformação atuais em uma pilha; restore() os remove da pilha. Isso isola alterações temporárias.

ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // fillStyle reverts to previous value

Detecção de recursos

Evite problemas em navegadores muito antigos verificando se getContext existe antes de usá-lo.

const canvas = document.getElementById("board");
if (canvas.getContext) {
  const ctx = canvas.getContext("2d");
  // safe to draw
} else {
  console.log("Canvas not supported");
}

Verificação rápida

Avalie sua compreensão da configuração do canvas.

Recapitulação: configuração do Canvas

Você aprendeu a obter o canvas, chamar getContext('2d'), entender a origem no canto superior esquerdo, definir o tamanho da área de pixels e do CSS, lidar com telas de alto DPI usando devicePixelRatio e configurar fillStyle/strokeStyle. A seguir: desenho de formas e caminhos.

Perguntas Frequentes

A aula “Configurando o contexto do Canvas” é grátis?

Sim — o texto completo de “Configurando o contexto do Canvas” é 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 “Configurando o contexto do Canvas”?

Obtenha e configure o contexto de renderização 2D. 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 1 de 4.

Quanto tempo leva a aula “Configurando o contexto do Canvas”?

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