Objeto Canvas do DOM HTML

O elemento <canvas> define uma área de bitmap na página HTML.

O API Canvas permite que o JavaScript desenhe gráficos na tela.

O API Canvas pode desenhar formas, linhas, curvas, caixas, texto e imagens, além de cores, rotação, transparência e outras operações de pixels.

Adicionar Canvas ao HTML

Você pode usar a tag <canvas> para adicionar um elemento canvas em qualquer local da página HTML:

Exemplo

<canvas id="myCanvas" width="300" height="150"></canvas>

Experimente pessoalmente

Como acessar o elemento Canvas

Você pode usar o método getElementById() do DOM HTML para acessar o elemento <canvas>:

const myCanvas = document.getElementById("myCanvas");

Para desenhar no canvas, você precisa criar o objeto contexto 2D:

const ctx = myCanvas.getContext("2d");

Notas

O elemento HTML <canvas> não tem funcionalidade de desenho.

Você deve usar JavaScript para desenhar qualquer gráfico.

O método getContext() retorna um objeto com ferramentas de desenho (métodos).

Desenhar no canvas

Após criar o objeto contexto 2D, você pode desenhar no canvas.

O método fillRect() abaixo desenha um retângulo preto, cujo canto superior esquerdo está na posição 20,20. O retângulo tem 150 pixels de largura e 100 pixels de altura:

Exemplo

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Experimente pessoalmente

Usando cor

A propriedade fillStyle define a cor de preenchimento do objeto de desenho:

Exemplo

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Experimente pessoalmente

Você também pode usar o método document.createElement() para criar um novo elemento <canvas> e adicioná-lo à página HTML existente:

Exemplo

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Experimente pessoalmente

Caminho

Os métodos comuns para desenhar no canvas são:

1. Iniciar um caminho - beginPath()
2. Mover para um ponto - moveTo()
3. Desenhar dentro do caminho - lineTo()
4. Desenhar um caminho - stroke()

Exemplo

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Experimente pessoalmente