beginPath() Method - Javascript Canvas Reference

Javascript examples for Canvas Reference:beginPath

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. 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. j  av a2 s.co  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