Referência do Canvas

O elemento <canvas> do HTML5 é usado para desenhar gráficos via scripting (geralmente JavaScript). Por si só, o elemento <canvas> é apenas um contêiner vazio — você desenha nele a partir de um script.

Para obter um objeto com o qual desenhar, você chama o método getContext('2d') do elemento. Ele retorna um objeto CanvasRenderingContext2D:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // a CanvasRenderingContext2D
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 80);

Quase todas as propriedades e métodos desta página pertencem a esse objeto de contexto 2D (ctx acima), não ao elemento <canvas>. As duas exceções são getContext() e toDataURL(), que pertencem ao próprio elemento <canvas>, e as propriedades width/height/data em Manipulação de Pixels, que pertencem a objetos ImageData. Esses estão agrupados em suas próprias seções abaixo.

Para tutoriais passo a passo, consulte Introdução ao Canvas, desenhando formas, coordenadas, texto e gradientes.

Cores, Estilos e Sombras

Consulte o tutorial de gradientes do Canvas para exemplos práticos.

Estilos de Linha

Retângulos

Caminhos

Transformações

Consulte Coordenadas do Canvas para entender como a matriz de transformação mapeia as posições de desenho para pixels.

Texto

Consulte o tutorial de texto do Canvas para exemplos completos.

Desenho de Imagens

Manipulação de Pixels

As propriedades abaixo pertencem ao objeto ImageData retornado por createImageData() / getImageData(), não ao elemento <canvas> ou ao contexto.

Composição

Estado do Canvas

Esses métodos pertencem ao contexto 2D e permitem salvar e restaurar o estado completo do desenho (estilos, transformações, região de recorte) como uma pilha.

O elemento <canvas>

Os membros a seguir pertencem ao próprio elemento <canvas>, não ao contexto 2D.

Prática