Frontend

Canvas API Cheat Sheet

Métodos de desenho, formas, cores e animações nativas usando o elemento <canvas>.

Início

Obtém o contexto de renderização 2D.

const ctx = canvas.getContext('2d');

Desenha um retângulo preenchido.

ctx.fillRect(x, y, largura, altura);

Desenha um círculo ou arco.

ctx.beginPath();
ctx.arc(x, y, raio, start, end);

Desenha uma linha até o ponto especificado.

ctx.lineTo(x, y);
ctx.stroke();

Define as cores de preenchimento e contorno.

ctx.fillStyle = 'red';
ctx.strokeStyle = '#000';

Limpa uma área do canvas (útil para animações).

ctx.clearRect(0, 0, w, h);