The CanvasRenderingContext2D.beginPath() method of the Canvas 2D API starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.

None.

None (undefined).

This example creates two paths, each of which contains a single line.

HTML

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

JavaScript

The beginPath() method is called before beginning each line, so that they may be drawn with different colors.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

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

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

Result

• The interface defining this method: CanvasRenderingContext2D
• CanvasRenderingContext2D.closePath()