context.lineTo()

Overview

Overviewvisual1

The context.lineTo() method adds a line segment to the current path by passing it two values:

context.lineTo(x, y);

This programs the context to add a straight line from the last point in the current path to the point (x, y), but it does not draw the line on the canvas until we tell the context to stroke or fill the path.

Draw a Straight Line

Most shapes are drawn on the canvas by creating a path first, and then stroking or filling the path later.

In this example, we use the context.beginPath() method to create a new path and the context.moveTo() method to set the path's starting point at (300, 50):

context.beginPath();
context.moveTo(300, 50);

Then, we add a line segment to the end of the path using the context.lineTo() method:

context.lineTo(50, 200);

This creates a straight line from (300, 50) to (50, 200), but doesn't draw the line yet. To actually draw the line, we use the context.stroke() method to stroke the line using the color currently stored in the context.strokeStyle property.

context.stroke();

Change the coordinates passed into the context.moveTo() and context.lineTo() methods to see what happens. To learn more about the context's coordinate system, visit the coordinates lesson.

Quick Reference: Coordinates

Editor (write code below)
var canvas = document.getElementById('line_to_example1'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(300, 50); context.lineTo(50, 200); context.stroke();
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)

Challenge 1

Challenge1visual1
What your drawing should look like

Draw a black line from (40, 20) to (240, 280).

Editor (write code below)
var canvas = document.getElementById('line_to_challenge1'); var context = canvas.getContext('2d'); context.beginPath(); // SET THE PATH'S STARTING POINT AT (40, 20) HERE // SET THE LINE'S END POINT AT (240, 280) HERE context.stroke();
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)
Challenge1

Set a Line's Appearance

Besides drawing a 1-pixel-wide black line, we can change the appearance of our lines by setting the context.strokeStyle, context.lineWidth, and context.lineCap properties. The context.strokeStyle property stores the current color, gradient, or pattern used for lines, the context.lineWidth property sets the thickness of lines, and the context.lineCap property determines how the end points of a line are drawn. To learn more about colors, gradients, and patterns, visit the fillStyle lesson.

In this example, we draw a line from (40, 220) to (360, 80) that is'DarkMagenta'and 8-pixels thick with 'round' ends.

Change the color, thickness, and shape of the end points to see how it affects the line's appearance. Possible values for the context.lineCap property are 'butt', 'round', and 'square'.

Quick Reference: Coordinates fillStyle

Editor (write code below)
var canvas = document.getElementById('line_to_example2'); var context = canvas.getContext('2d'); context.lineWidth = 8; // Set the line width context.lineCap = 'round'; // Set the shape of the end points context.strokeStyle = 'DarkMagenta'; // Set the line color context.beginPath(); context.moveTo(40, 220); context.lineTo(360, 80); context.stroke();
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)

Challenge 2

Challenge2visual1
What your drawing should look like

Draw a line from (40, 120) to (340, 240) that is the color 'SlateBlue' and 4-pixels thick with 'square' ends.

Editor (write code below)
var canvas = document.getElementById('line_to_challenge2'); var context = canvas.getContext('2d'); // SET THE LINE WIDTH TO 4 HERE // SET THE SHAPE OF THE END POINTS TO SQUARE HERE // SET THE LINE COLOR TO SLATEBLUE HERE // DRAW THE LINE FROM (40, 120) TO (340, 240) HERE
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)
Challenge2

Draw a Path of Connected Lines

We don't just use the context.lineTo() method to draw individual lines. We also use it to draw paths made by connecting multiple lines.

In this example, we draw a path made by connecting the points (140, 20), (60, 180), (260, 300), and (340, 220) with straight lines that are the color 'RebeccaPurple' and 2-pixels thick.

Quick Reference: Coordinates fillStyle

Editor (write code below)
var canvas = document.getElementById('line_to_example3'); var context = canvas.getContext('2d'); context.lineWidth = 2; context.strokeStyle = 'RebeccaPurple'; context.beginPath(); context.moveTo(140, 20); context.lineTo(60, 180); context.lineTo(260, 300); context.lineTo(340, 220); context.stroke();
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)

Challenge 3

Challenge3visual1
What your drawing should look like

Draw a path made by connecting the points (200, 160), (280, 120), (380, 240), (140, 280), and (60, 40) with straight lines that are the color 'OrangeRed' and 3-pixels thick.

Editor (write code below)
var canvas = document.getElementById('line_to_challenge3'); var context = canvas.getContext('2d'); // SET THE LINE WIDTH TO 3 HERE // SET THE LINE COLOR TO ORANGERED HERE // DRAW THE LINES CONNECTING THE POINTS (200, 160), (280, 120), (380, 240), (140, 280), AND (60, 40) HERE
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)
Challenge3

Draw the Outline of a Polygon

In this example, we draw the outline of a polygon by connecting the points (40, 40), (320, 160), (40, 280), and (140, 160) with straight lines that are the color 'ForestGreen' and 6-pixels thick. To close the polygon, we use the context.closePath() method to automatically connect the last point in the path to the first point.

Quick Reference: Coordinates fillStyle

Editor (write code below)
var canvas = document.getElementById('line_to_example4'); var context = canvas.getContext('2d'); context.lineWidth = 6; context.strokeStyle = 'ForestGreen'; context.beginPath(); context.moveTo(40, 40); context.lineTo(320, 160); context.lineTo(40, 280); context.lineTo(140, 160); context.closePath(); context.stroke();
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)

Challenge 4

Challenge4visual1
What your drawing should look like

Draw the outline of a polygon by connecting the points (360, 110), (360, 180), (20, 180), (20, 100), (80, 95), (110, 40), (220, 40), and (270, 95) with straight lines that are the color 'SaddleBrown' and 5-pixels thick.

Editor (write code below)
var canvas = document.getElementById('line_to_challenge4'); var context = canvas.getContext('2d'); // SET THE LINE WIDTH TO 5 HERE // SET THE LINE COLOR TO SADDLEBROWN HERE // DRAW THE LINES CONNECTING THE POINTS (360, 110), (360, 180), (20, 180), (20, 100), (80, 95), (110, 40), (220, 40), AND (270, 95) HERE
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)
Challenge4

Draw a Filled Polygon

In this example, we draw a filled polygon by connecting the points (160, 60), (280, 60), (340, 260), and (100, 260) with straight lines.

To fill the polygon instead of outlining it, we use the context.fill() method instead of the context.stroke() method. This fills the polygon with the color currently stored in the context.fillStyle property. When a path is filled, it is closed automatically even if the context.closePath() method has not been called.

Quick Reference: Coordinates fillStyle

Editor (write code below)
var canvas = document.getElementById('line_to_example5'); var context = canvas.getContext('2d'); context.fillStyle = 'DodgerBlue'; context.beginPath(); context.moveTo(160, 60); context.lineTo(280, 60); context.lineTo(340, 260); context.lineTo(100, 260); context.closePath(); context.fill();
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)

Challenge 5

Challenge5visual1
What your drawing should look like

Draw a filled polygon by connecting the points (20, 90), (60, 20), (210, 20), (270, 90), (360, 110), (360, 200), and (20, 200) with straight lines and filling the path with the color 'MediumPurple'.

Editor (write code below)
var canvas = document.getElementById('line_to_challenge5'); var context = canvas.getContext('2d'); // SET THE FILL COLOR TO MEDIUMPURPLE HERE // DRAW THE LINES CONNECTING THE POINTS (20, 90), (60, 20), (210, 20), (270, 90), (360, 110), (360, 200), AND (20, 200) HERE
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)
Challenge5

Fill and Outline a Polygon

We use the context.fill() method to fill a path and the context.stroke() method to outline it. After filling or stroking a path, the path remains the current path until we create a new one, so we can fill and stroke a path without creating the path twice.

In this example, we create a polygon by connecting the points (200, 40), (340, 240), and (60, 200). Then, we fill the polygon with the color 'DeepPink' and outline it with a 'DarkRed' line that is 4-pixels thick.

Quick Reference: Coordinates fillStyle

Editor (write code below)
var canvas = document.getElementById('line_to_example6'); var context = canvas.getContext('2d'); context.lineWidth = 4; context.strokeStyle = 'DarkRed'; context.fillStyle = 'DeepPink'; context.beginPath(); context.moveTo(200, 40); context.lineTo(340, 240); context.lineTo(60, 200); context.closePath(); context.fill(); context.stroke();
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)

Challenge 6

Challenge6visual1
What your drawing should look like

Create a polygon by connecting the points (200, 20), (320, 220), (160, 280), and (90, 140) with straight lines. Then, fill the polygon with the color 'MediumSeaGreen', and outline it with a 'DarkGreen' line that is 6-pixels thick.

Editor (write code below)
var canvas = document.getElementById('line_to_challenge6'); var context = canvas.getContext('2d'); // SET THE LINE WIDTH TO 6 HERE // SET THE STROKE COLOR TO DARKGREEN HERE // SET THE FILL COLOR TO MEDIUMSEAGREEN HERE // DRAW THE LINES CONNECTING THE POINTS (200, 20), (320, 220), (160, 280), AND (90, 140) HERE // FILL THE POLYGON HERE // STROKE THE POLYGON HERE
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)
Challenge6

Ready for the next lesson?

Next up, the "save() / restore()" lesson >