Skip to content
Related Articles

Related Articles

HTML | canvas moveTo() Method
  • Last Updated : 25 Jul, 2019

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:

  • x: This parameter specifies to the x-axis (horizontal) coordinate of the point.
  • y: This parameter specifies to the y-axis (vertical) coordinate of the point.

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 second 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:

  • Google Chrome
  • Internet Explorer 9.0
  • Firefox
  • Opera
  • Safari
My Personal Notes arrow_drop_up
Recommended Articles
Page :