Skip to content
Related Articles
Open in App
Not now

Related Articles

HTML | canvas moveTo() Method

Improve Article
Save Article
  • Last Updated : 15 Feb, 2023
Improve Article
Save Article

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 the x-axis (horizontal) coordinate of the point.
  • y: This parameter specifies the y-axis (vertical) coordinate of the point.

Program 1: 

html




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

html




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

  • Google Chrome
  • Internet Explorer 9.0
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!