HTML Canvas - lineTo() Method

The HTML Canvas lineTo() method of Canvas API is generally used to add a straight line to the current path to the point passed as input parameters.

To view this line rendered on the Canvas element, we have to use fill() or stroke() methods to the canvas context object.

Syntax

Following is the syntax of HTML Canvas lineTo() method −

CanvasRenderingContext2D.lineTo(x, y);

Parameters

Following is the list of parameters of this method −

S.No	Parameter & Description
1	x The x co-ordinate value of the end point of line.
2	y The y co-ordinate value of the end point of line.

Return values

It creates a line inside the Canvas element which can be viewed only if filled or stroked using respective methods.

Example 1

The following example draws a line onto the canvas to the specified point using the HTML Canvas lineTo() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="250" height="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.moveTo(20, 20);
      context.lineTo(230, 80);
      context.stroke();
   </script>
</body>
</html>

Output

The output formed by the given code is displayed on the webpage as −

Example

The following example draws 'K' letter by using lineTo() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="150" height="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.moveTo(40, 20);
      context.lineTo(40, 90);
      context.moveTo(100, 20);
      context.lineTo(40, 55);
      context.lineTo(100, 90);
      context.stroke();
   </script>
</body>
</html>

Output

The output formed by the given code is displayed on the webpage as −

Example

The following example draws 'tin' word onto the canvas element by drawing lines using lineTo() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="250" height="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.strokeStyle = 'blue';
      context.moveTo(40, 20);
      context.lineTo(80, 20);
      context.moveTo(60, 20);
      context.lineTo(60, 90);
      context.moveTo(100, 20);
      context.lineTo(140, 20);
      context.moveTo(120, 20);
      context.lineTo(120, 90);
      context.moveTo(100, 90);
      context.lineTo(140, 90);
      context.moveTo(160, 90);
      context.lineTo(160, 20);
      context.lineTo(200, 90);
      context.lineTo(200, 20);
      context.stroke();
   </script>
</body>
</html>

Output

The output formed by the given code is displayed on the webpage as −

html_canvas_lines.htm