CanvasRenderingContext2D.beginPath()

O método CanvasRenderingContext2D.beginPath() da API Canvas 2D inicia um novo caminho (path), esvaziando a lista de sub-caminhos (sub-paths). Use esse método quando você quiser criar um novo path.

Sintaxe

void ctx.beginPath();

Exemplos

Usando o método `beginPath`

Isto é só um simples trecho de código que usa o método fillRect.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// Primeiro path
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

// Segundo path
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();

Edite o código abaixo e veja as alterações instantâneas no canvas:

Especificações

Especificação	Estado	Comentário
HTML Living Standard The definition of 'CanvasRenderingContext2D.beginPath' in that specification.	Padrão em tempo real

Compatibilidade com navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar! (en-US)

Desktop
Dispositivo móvel

Característica	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Suporte básico	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

Característica	Android	Chrome para Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Suporte básico	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

Veja também

A definição da interface CanvasRenderingContext2D
CanvasRenderingContext2D.closePath()