HTML canvas moveTo() Method
Last Updated :
09 Jun, 2023
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...