HTML | canvas beginPath() Method
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:
<!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:
<!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> |
Supported Browsers: The browsers supported by HTML canvas beginPath() method are listed below:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Safari
- Opera
Please Login to comment...