CanvasRenderingContext2D.beginPath

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.

Syntax

void ctx.beginPath();

Examples

Creating distinct paths

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

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also

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