Projeto desenho no canvas

canvas é bitmap. Contexto 2D e ponteiro desenham o croqui. clearRect limpa.

Trabalhe sobre uma cópia da pasta inicio do exemplo correspondente. Leia, digite, mude uma coisa, preveja o resultado, recarregue e confira. A referência completa fica na raiz da pasta do exemplo, no pacote anexo.

O que você pratica

• Explique o papel central desta etapa no exemplo 26-canvas.
• Implemente a versão inicio e descreva uma mudança que você testou.
• Qual erro comum deste capítulo você conseguiu provocar de propósito?

Contexto 2D

canvas.getContext("2d"), cor e espessura da linha.

Ponteiro

pointerdown começa; pointermove continua; pointerup solta.

Limpar

clearRect(0, 0, width, height) no botão Limpar.

Ler o exemplo completo

A referência desta etapa usa app.js, index.html, styles.css. Abra primeiro o resultado pronto e identifique onde acontece contexto 2d. Depois compare o mesmo ponto com a pasta inicio. Essa comparação mostra exatamente o que você precisa escrever, sem esconder partes indispensáveis do programa.

Diagnóstico guiado

Se o resultado não aparecer, confirme o arquivo aberto, salve a alteração e recarregue. Em seguida, abra o Console: leia a primeira mensagem de erro, confira o nome do arquivo e a linha indicada. Quando houver fetch, sirva a pasta apenas em 127.0.0.1; abrir por file:// não reproduz o pedido HTTP.

Critério de avanço

Avance quando conseguir explicar o papel de inicio, realizar uma mudança pequena e restaurar o exemplo sem copiar a resposta comentada.

Atividades

1. Na referência, onde aparece contexto 2d e qual efeito você observa?
2. Na cópia inicio, mude apenas inicio. O que você prevê antes de executar novamente?
3. Provoque uma falha pequena nesta etapa. Qual mensagem ou comportamento ajudou você a encontrar a causa?

Respostas comentadas

Só abra depois de tentar.

Atividade 1. A resposta deve apontar o arquivo e ligar o trecho ao efeito visível. Compare com app.js, index.html, styles.css.

Atividade 2. Registre o valor anterior, o novo valor e o resultado previsto. Depois confira; se houver diferença, explique o que o programa realmente fez.

Atividade 3. Uma boa investigação começa pela primeira mensagem do Console, pelo arquivo salvo e pelo caminho aberto. Corrija uma causa por vez e execute de novo.

Exemplo deste capítulo: pacote de exemplos/26-canvas/.

O arquivo completo

Referência do exemplo 26-canvas, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Desenho no canvas — Ateliê do Marco Zero</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a class="skip" href="#conteudo">Ir para o conteúdo</a>
  <header>
    <p class="tag">Ateliê do Marco Zero · Recife</p>
    <h1>Desenho no canvas</h1>
  </header>
  <main id="conteudo">
    <canvas id="tela" width="480" height="280" style="border:2px solid #c9c0b0;max-width:100%;background:#fff;touch-action:none"></canvas>
    <p><button type="button" id="limpar" class="secondary">Limpar</button></p>

  </main>
  <footer>
    <p>Material de estudo. Conteúdo fictício. Servidor só em 127.0.0.1.</p>
  </footer>
  <script src="app.js"></script>
</body>
</html>

app.js

const canvas = document.querySelector("#tela");
const ctx = canvas.getContext("2d");
let desenhando = false;

ctx.strokeStyle = "#0d6e6e";
ctx.lineWidth = 3;
ctx.lineCap = "round";

function pos(e) {
  const r = canvas.getBoundingClientRect();
  const x = (e.clientX - r.left) * (canvas.width / r.width);
  const y = (e.clientY - r.top) * (canvas.height / r.height);
  return { x, y };
}

canvas.addEventListener("pointerdown", (e) => {
  desenhando = true;
  const p = pos(e);
  ctx.beginPath();
  ctx.moveTo(p.x, p.y);
  canvas.setPointerCapture(e.pointerId);
});
canvas.addEventListener("pointermove", (e) => {
  if (!desenhando) return;
  const p = pos(e);
  ctx.lineTo(p.x, p.y);
  ctx.stroke();
});
canvas.addEventListener("pointerup", () => {
  desenhando = false;
});

document.querySelector("#limpar").addEventListener("click", () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
});