Skip to content
Related Articles

Related Articles

HTML | canvas beginPath() Method
  • Last Updated : 19 Jul, 2019
GeeksforGeeks - Summer Carnival Banner

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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :