line()

Category:Drawing

Draws a straight line between two points.

Use stroke() to color a line and strokeWeight() to change it's thickness. A line cannot be filled, therefore the fill() function will not affect the color of a line.

The default stroke() color is black and the default strokeWeight() is 1.

Examples

line(10, 50, 100, 75);

Two Lane Road

Draw a two lane road.

// Draw a two lane road.
strokeWeight(15);
line(0, 0, 400, 400);
stroke("yellow");
strokeWeight(1);
line(0, 0, 400, 400);

Tic-Tac-Toe

Draw a tic-tac-toe board.

// Draw a tic-tac-toe board.
strokeWeight(10);
line(133, 0, 133, 400);
line(266, 0, 266, 400);
line(0, 133, 400, 133);
line(0, 266, 400, 266);

Optical Illusion

Are the 4 lines straight?

                            // Are the 4 lines straight?
noFill();
for (var i = 5; i < 20; i++) {
  ellipse(200, 200, 20*i, 20*i);
}
strokeWeight(5);
line(200, 0, 400, 200);
line(400, 200, 200, 400);
line(200, 400, 0, 200);
line(0, 200, 200, 0);

Syntax

line(x1, y1, x2, y2)

Parameters

Name	Type	Description
x1	Number	The x-location in pixels of the first endpoint of the line. Should be a number from 0 to 400, but negative numbers will start the line to the left of the display and numbers greater than 400 will start the line to the right of the display (possibly unseen).
y1	Number	The y-location in pixels of the first endpoint of the line. Should be a number from 0 to 400, but negative numbers will start the line above the display and numbers greater than 400 will start the line below the display (possibly unseen).
x2	Number	The x-location in pixels of the second endpoint of the line. Should be a number from 0 to 400, but negative numbers will start the line to the left of the display and numbers greater than 400 will start the line to the right of the display (possibly unseen).
y2	Number	The y-location in pixels of the second endpoint of the line. Should be a number from 0 to 400, but negative numbers will start the line above the display and numbers greater than 400 will start the line below the display (possibly unseen).

Returns

No return value. Outputs to the display only.

Tips

If you're having trouble getting a line to show up, make sure that noStroke() hasn't been called, and where you're trying to draw the line fits within the coordinates of the display (400 x 400).
Anything you draw will overlap previous things you drew. The sequence of drawing statements is usually important.
The default stroke is black, the default stroke weight is 1 pixel. Change the width and color of subsequent lines using strokeWeight() and stroke().

Found a bug in the documentation? Let us know at documentation@code.org