HTML Reference Manual

HTML tag list

HTML canvas beginPath() method

beginPath() is a Canvas 2The D API method that starts a new path by clearing the subpath list. When you want to create a new path, call this method.

HTML canvas reference manual

Online Example

Draw two paths on the canvas; green and purple:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas beginPath() method usage-Basic Tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
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　
ctx.beginPath();
ctx.strokeStyle="purple";　　//　Purple path
ctx.moveTo(50,0);
ctx.lineTo(150,130);　　　　　　　　　　　　
ctx.stroke();　　//　draw
</script>
</body>
</html>

Test to see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9and Firefox, Opera, Chrome, and Safari support beginPath() methods.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and usage

The beginPath() method starts a new path or resets the current path.

Tip:Please use these methods to create paths moveTo(), lineTo(), quadricCurveTo(), bezierCurveTo(), arcTo(), and arc().

Tip:Please use stroke() Method to draw an exact path on the canvas.

JavaScript syntax:	context.beginPath();

HTML canvas reference manual

HTML: <template> tag