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.

void ctx.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:

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