HTML canvas beginPath() Method

Last Updated : 09 Jun, 2023

The canvas beginPath() method is used to start a path or reset the current path. The moveTo(), lineTo(), quadricCurveTo(), bezierCurveTo(), arcTo(), and arc() methods are used to create paths. Also, the stroke() method is used to draw the path on the canvas. Syntax:

context.beginPath();

Example 1:

html

<!DOCTYPE html> <html> <head> <title> HTML canvas beginPath() Property </title> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h2>HTML canvas beginPath() Property</h2> <canvas id="GFG" width="500" height="300"></canvas> <script>   var GFG = document.getElementById("GFG");   var context = GFG.getContext("2d");    // Create a path  context.beginPath();    // Set the path width  context.lineWidth = "8";    // Set the path color  context.strokeStyle = "green";    context.moveTo(100, 250);  context.lineTo(150, 50);  context.lineTo(250, 250);    context.stroke();    context.beginPath();  </script> </body> </html>

Output:

Example 2:

html

<!DOCTYPE html> <html> <head> <title> HTML canvas beginPath() Property </title> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h2>HTML canvas beginPath() Property</h2> <canvas id="GFG" width="500" height="300"></canvas> <script>   var GFG = document.getElementById("GFG");   var context = GFG.getContext("2d");    // Set the path width  context.lineWidth = 5;    // Create path  context.beginPath();  context.moveTo(100, 20);  context.lineTo(230, 200);    // Set path color  context.strokeStyle = 'green';   context.stroke();    // Create another path  context.beginPath();  context.moveTo(230, 200);   context.quadraticCurveTo(230, 200, 260, 100);    // Set path color  context.strokeStyle = 'blue';   context.stroke();     // Create another path  context.beginPath();  context.moveTo(260, 100);   context.bezierCurveTo(290, -40, 300, 190, 400, 150);    // Set path color  context.strokeStyle = 'orange';   context.stroke();  context.closePath();   </script> </body> </html>