html tutorial - lineTo Method in HTML5 Canvas - html5 - html code - html form

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

The lineTo() is the method of HTML canvas.
The lineTo() method adds a new point and creates a line To that point FROM the last specified point in the canvas.
lineTo() method does not draw the line.

Syntax for lineTo() method in HTML5 Canvas:

context.lineTo(x,y);

Parameter Values for lineTo() method in HTML5 Canvas:

Parameter	Description
X	The x-coordinate of where to create the line to.
Y	The x-coordinate of where to create the line to.

Sample Coding for lineTo() method in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>wikitechy lineTo Method in canvas</title>
    </head>
    <body>
        <h2>wikitechy lineTo Method in canvas</h2>
        <canvas id="wikitechyCanvas" width="200" height="150"         
                style="border:1px solid blue;">
        </canvas>
        <script>
            var c = document.getElementById("wikitechyCanvas");
            var context = c.getContext("2d");
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(200, 150);
            context.stroke();
        </script>
    </body>
</html>

Code Explanation for lineTo() method in HTML5 Canvas:

lineTo method in HTML5 canvas Code Explanation

“wikitechyCanvas” is declare id value of the HTML canvas.
The getElementById() method is used to get the element with the specific id (“wikitechycanvas”).
The beginPath() method is used to begins a path.
The moveTo()method is used to moves the path to the specified point(0,0) in the canvas.
The lineTo(200,150) method is used to set a new point and create a line to that point from the last specified point(0,0) in the canvas.
The stroke()method is used to draws a path by using moveTo() and lineTo() methods

Output for lineTo() method in HTML5 Canvas:

The HTML canvas displays a rectangle with blue color border.
The line is drawn by using lineTo() method that specifies that the ending point of the line is (200,150).