Forma no Canvas HTML

instância

Exemplo 1

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

Experimente você mesmo

Desenho de linha Canvas

A linha de desenho usa o caminho do canvas:

método

beginPath() O método começa um novo caminho. Ele não desenha nada, ele apenas define um novo caminho.

moveTo() Define o ponto inicial da linha. Ele não desenha nada, apenas define um ponto inicial.

lineTo() O método define o ponto final da linha. Ele não desenha nada, apenas define um ponto final.

stroke() O método desenha linhas de fato. A cor padrão do traço é preta.

Mais exemplos

Exemplo 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

Experimente você mesmo

Exemplo 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Experimente você mesmo

Dica

Se você deseja desenhar um retângulo, não é necessário desenhar 4 linhas.

No próximo capítulo, você aprenderá a usar drawRect() método para desenhar um retângulo.

Propriedade strokeStyle

strokeStyle A propriedade define o estilo a ser usado ao desenhar no canvas.

Deve ser chamado stroke() configure-o antes de chamar o método.

instância

ctx.beginPath();
// Definir retângulo
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// Definir triângulo
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

Experimente você mesmo

Veja também:

Manual Completo do Canvas no CodeW3C.com