line(x1, y1, x2, y2)
You can draw many things with the basic canvas drawing functions of circle, line and rect. For line(), the (x1, y1) to (x2, y2) coordinates specify the endpoints of the line, relative to the top-left corner of the canvas (x:0 y:0). Lines are drawn using the current stroke width and current stroke color.
When drawing thick lines, the line coordinates define the center of the line. The ends of the line will be rounded, forming semi-circles beyond the ends of the line.
Examples
Example: diagonal line
//Draw a diagonal line across the screen.
createCanvas("canvas1");
line(0, 0, 320, 480);
Example: small window
Lines and shapes drawn outside the bounds of the canvas are not totally visible.
// Lines and shapes drawn outside the bounds of the canvas are not totally visible.
createCanvas("canvas1", 50, 50);
line(0, 0, 320, 480);
Example: two lines
Draw two lines with different stroke width showing how the stroke width affects how the line is drawn.
// Draw two lines with different stroke width showing how the stroke width affects how the line is drawn.
createCanvas("canvas1");
setStrokeColor("lightblue");
setStrokeWidth(20);
line(20, 50, 300, 50);
setStrokeColor("black");
setStrokeWidth(1);
line(20, 50, 300, 50);
Example: random line art
Draw 100 random lines, head to tail.
// Draw 100 random lines, head to tail.
createCanvas("canvas1");
var x1=randomNumber(0,320);
var y1=randomNumber(0,480);
var x2=randomNumber(0,320);
var y2=randomNumber(0,480);
for (var i = 0; i < 100; i++) {
line(x1, y1, x2, y2);
x1=x2;
y1=y2;
x2=randomNumber(0,320);
y2=randomNumber(0,480);
}
Syntax
line(x1, y1, x2, y2)
Parameters
| Name | Type | Required? | Description |
|---|---|---|---|
| x1 | number | The x position on the canvas in pixels of the beginning of the line. | |
| y1 | number | The y position on the canvas in pixels of the beginning of the line. | |
| x2 | number | The x position on the canvas in pixels of the end of the line. | |
| y2 | number | The y position on the canvas in pixels of the end of the line. |
Returns
Tips
- A canvas element must be created before a line can be drawn. Create a canvas element in Design mode first, or call createCanvas() before calling line.
- If you're having trouble getting a line to show up, make sure that you're trying to draw the line within the bounds of the active canvas.
- Change the width of the line and color of the line used to draw all subsequent liness using setStrokeWidth, setStrokeColor.
Found a bug in the documentation? Let us know at support@code.org.
