Open In App

HTML canvas moveTo() Method

The canvas moveTo() method is used to move the path to the specified point in the canvas, without creating a line. After calling the moveTo() method, we can use stroke() method to draw the path on the canvas. 

Syntax:



context.moveTo( x, y );

Parameters: This function accepts two parameters as mentioned above and described below:

Program 1: 






<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas moveTo() Method
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h2>HTML canvas moveTo() Method</h2>
      
    <canvas id="GFG" width="500" height="300" >
    </canvas>
      
    <script>
        var id_cont = document.getElementById("GFG");
        var context = id_cont.getContext("2d");
        context.moveTo(50, 50);
        context.lineTo(450, 50);
        context.strokeStyle="green";
        context.stroke();
    </script>
</body>
  
</html>                    

Output: Program 2: 




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas moveTo() Method
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h2>HTML canvas moveTo() Method</h2>
      
    <canvas id="GFG" width="500" height="300" >
    </canvas>
      
    <script>
        var id_cont = document.getElementById("GFG");
        var context = id_cont.getContext("2d");
          
        // Begin the first sub-path
        context.moveTo(130, 80);   
        context.lineTo(350, 80);
          
        // Begin the second sub-path
        context.moveTo(130, 30);   
        context.lineTo(350, 30);
        context.strokeStyle="green";
        context.stroke();
    </script>
</body>
  
</html>    

Output: Supported Browsers: The browsers supported by HTML canvas moveTo() method are listed below:


Article Tags :