beginPath() Method - Javascript Canvas Reference

Javascript examples for Canvas Reference:beginPath


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



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

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>

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


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.strokeStyle = "purple";  // Purple path
ctx.moveTo(50, 0);
ctx.lineTo(150, 230);
ctx.stroke();  // Draw it



Related Tutorials