HTML Academy · Aula

Configurando o Canvas e o contexto 2D

Crie um elemento canvas e obtenha o contexto de renderização 2D.

Configurando o Canvas e o contexto 2D é uma aula grátis de HTML 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 HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O elemento canvas

O elemento <canvas> é uma superfície bitmap desenhável no navegador:

<canvas id="myCanvas" width="800" height="400">
  <!-- Fallback for browsers without canvas support -->
  <p>Your browser does not support HTML5 Canvas.</p>
</canvas>

Atributos de largura e altura

Defina sempre as dimensões do canvas por meio de atributos HTML, não de CSS:

<!-- CORRECT: set intrinsic size via attributes -->
<canvas width="800" height="400"></canvas>

<!-- WRONG: CSS changes display size but not canvas resolution -->
<canvas style="width: 800px; height: 400px;"></canvas>
<!-- This stretches a default 300x150 canvas to 800x400
     Result: blurry graphics -->

Obtenção do contexto 2D

Obtenha o contexto de renderização 2D para desenhar:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// ctx is a CanvasRenderingContext2D object
// All drawing operations are methods on ctx

// Check browser support:
if (!canvas.getContext) {
  console.error('Canvas not supported');
}

Sistema de coordenadas

O sistema de coordenadas do canvas começa no canto superior esquerdo:

// (0, 0) = top-left corner
// (width, 0) = top-right
// (0, height) = bottom-left
// (width, height) = bottom-right

// For a 800x400 canvas:
// x increases left → right (0 to 800)
// y increases top → bottom (0 to 400)
//
// Example: draw at center:
ctx.fillRect(400, 200, 10, 10);  // centered dot

Estado do canvas

O canvas possui um estado de desenho que pode ser salvo e restaurado:

ctx.save();       // push current state onto a stack

// Change state:
ctx.fillStyle = 'red';
ctx.globalAlpha = 0.5;

// Draw with modified state...
ctx.fillRect(100, 100, 200, 200);

ctx.restore();    // pop state: back to pre-save settings

Limpeza do canvas

Limpe todo o canvas antes de desenhar novamente (para animações):

// Clear entire canvas:
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Or with a background color:
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

fillStyle e strokeStyle

Defina as cores para operações de preenchimento e traçado:

ctx.fillStyle = 'blue';                    // CSS color name
ctx.fillStyle = '#ff6600';                 // hex color
ctx.fillStyle = 'rgb(255, 100, 0)';       // rgb
ctx.fillStyle = 'rgba(255, 100, 0, 0.5)'; // rgba with alpha
ctx.fillStyle = gradient;                  // gradient object
ctx.fillStyle = pattern;                   // pattern object

ctx.strokeStyle = '#333333';               // border color

lineWidth e outras propriedades de estilo

Propriedades de traçado e estilo de linha:

ctx.lineWidth = 4;           // stroke width in pixels
ctx.lineCap = 'round';       // butt | round | square
ctx.lineJoin = 'round';      // miter | round | bevel
ctx.setLineDash([5, 3]);     // dashed line: 5px dash, 3px gap
ctx.globalAlpha = 0.8;       // transparency for all drawing
ctx.globalCompositeOperation = 'multiply'; // blend modes

Canvas HiDPI responsivo

Corrija o canvas borrado em telas Retina/HiDPI:

function setupHiDPI(canvas, width, height) {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);  // scale all drawing
  return ctx;
}

canvas vs SVG

Quando escolher canvas ou SVG:

Canvas — bitmap, pixel a pixel, excelente para jogos, visualização de grandes volumes de dados e processamento de imagens
SVG — vetorial, escalável, excelente para logotipos, ícones, gráficos com elementos interativos e acessibilidade

Acessibilidade do canvas

O canvas não oferece acessibilidade integrada — adicione-a manualmente:

<canvas
  id="chart"
  width="800"
  height="400"
  aria-label="Bar chart showing Q1-Q4 revenue growth"
  role="img"
>
  <!-- Fallback for non-canvas browsers and screen readers -->
  <table><!-- accessible data table --></table>
</canvas>

Verificação rápida

Qual é a maneira correta de obter um contexto de desenho do canvas?

Recapitulação: configuração do canvas

O essencial da configuração do canvas:

Defina largura e altura por meio de atributos HTML, não de CSS
canvas.getContext('2d') — obtenha o contexto de desenho
Origem no canto superior esquerdo (0,0); x→direita, y→baixo
ctx.save() / ctx.restore() — gerenciamento de estado baseado em pilha
Escale por devicePixelRatio para obter uma renderização nítida em telas Retina

Perguntas Frequentes

A aula “Configurando o Canvas e o contexto 2D” é grátis?

Sim — o texto completo de “Configurando o Canvas e o contexto 2D” é 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 HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Configurando o Canvas e o contexto 2D”?

Crie um elemento canvas e obtenha o contexto de renderização 2D. Você pratica HTML 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 HTML Academy?

Nenhuma experiência prévia é necessária. HTML 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 Canvas e o contexto 2D”?

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 HTML Academy?

Sim. Cada aula de HTML 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 HTML Academy