beginPath() Method - Javascript Canvas Reference

Javascript examples for Canvas Reference:beginPath

Description

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

After calling beginPath() you can use moveTo(), lineTo(), quadricCurveTo(), bezierCurveTo(), arcTo(), and arc(), to create paths.

To draw the path you created, use the stroke() method.

JavaScript syntax


context.beginPath();

Example

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

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="250" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

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

ctx.beginPath();//w  w w  .jav a2 s. c o  m
ctx.lineWidth = "5";
ctx.strokeStyle = "green";  // Green path
ctx.moveTo(0, 75);
ctx.lineTo(250, 175);
ctx.stroke();  // Draw it

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

</script>

</body>
</html>

Related Tutorials