THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML canvas beginPath() Method

❮ HTML Canvas Reference

Example

Draw two paths on the canvas; one green and one purple:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "green"; // Green path
ctx.moveTo(0, 75);
ctx.lineTo(250, 75);
ctx.stroke(); // Draw it

ctx.beginPath();
ctx.strokeStyle = "purple"; // Purple path
ctx.moveTo(50, 0);
ctx.lineTo(150, 130);
ctx.stroke(); // Draw it
Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
beginPath() Yes 9.0 Yes Yes Yes

Definition and Usage

The beginPath() method begins a path, or resets the current path.

Tip: Use moveTo(), lineTo(), quadricCurveTo(), bezierCurveTo(), arcTo(), and arc(), to create paths.

Tip: Use the stroke() method to actually draw the path on the canvas.

JavaScript syntax: context.beginPath();

❮ HTML Canvas Reference