html tutorial - moveTo() Method in HTML5 Canvas - html5 - html code - html form

Learn html - html tutorial - Moveto method in html5 canvas - html examples - html programs

The moveTo() method is one of the canvas method.
The moveTo() method is used to move path from the specific point in the canvas, without drawing a line.

Syntax for moveTo() Method in HTML5 Canvas:

context.moveTo(x,y);

Parameter values for moveTo() Method in HTML5 Canvas:

Parameter	Description
X	The x-coordinate of where to move the path to
Y	The y-coordinate of where to move the path to

Sample Coding for moveTo() Method in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
      <title>wikitechy-moveTo() method in Canvas</title>
    </head>
    <body>
        <h2>Wikitechy-moveTo() method in canvas</h2>
        <canvas id="wikitechyCanvas" width="400" height="200" 
                  style="border:1px solid #d3d3d3;">
        </canvas>
        <script>
          var d = document.getElementById("wikitechyCanvas");
          var dfh = d.getContext("2d");
          dfh.moveTo(0, 0);
          dfh.lineTo(400, 200);
          dfh.strokeStyle="blue";
          dfh.stroke();
        </script>
    </body>
</html>

Code Explanation for moveTo() Method in HTML5 Canvas:

moveTo() method in HTML5 canvas Code Explanation

”wikitechyCanvas” is used to declare the id value of the canvas tag.
getElementById: method is used to draw the element from canvas id value.
getContext(“2d”): method is used to get the element with the specific id “wikitechyCanvas”.
The Gradient is created using a createLinearGradient() Method which is set the location of the gradient.
The moveTo() method is used to set the starting point at (0,0) in x,y axis on the canvas.
The lineTo() method is used to set the ending point at (400,200) in x,y axis on the canvas.
strokeStyle property is used to set the line color as blue.
stroke() method is used to draw the actually path.

Output for moveTo() Method in HTML5 Canvas:

canvas is used to draw a rectangle with width as 400 and height as 200.
The moveTo() method displays starting point at (0,0) in x,y axis on the canvas.
The lineTo() method displays ending point at (400,200) in x,y axis on the canvas.