stroke()

Sets the color used to draw lines, points and outline shapes.

The stroke color controls the color of lines, points and outline of shapes drawn - arc(), ellipse(), rect(), regularPolygon(), shape(). The fill color for shapes is set using fill(). Until you change the stroke, Game Lab will continue to draw with the color that you set.

The color parameter can take one of two forms. It can be:

• The lowercase name of a color inside " ". A full list of color names can be found at W3 Schools - Colors
• A call to the rgb() command.

The default fill color is black.

Examples

// Draw a light blue line.
stroke("lightblue");
line(0, 0, 400, 400);

Basketweave

Draw random colored lines in a square basketweave pattern.

// Draw random colored lines in a square basketweave pattern.
strokeWeight(5);
for (var i = 0; i < 31; i++) {
  var x1=i*10;
  var x2=i*10+100;
  var y1=i*10;
  var y2=i*10+100;
  for (var j = 0; j < 4; j++) {
    stroke(rgb(randomNumber(0,255),randomNumber(0,255),randomNumber(0,255)));
    if (j == 0) {
      line (x1,y1,x2,y1);
    } else {
      if (j == 1) {
        line (x2,y1,x2,y2);  
      } else {
        if (j == 2) {
          line (x2,y2,x1,y2);
        } else {
          line (x1,y2,x1,y1);              
        }
      }
    }
  }
}

                            // Use the mouse pointer position to place random lines and points.
function draw() {
  stroke(rgb(randomNumber(0,255),randomNumber(0,255),randomNumber(0,255)));
  if (randomNumber(0,1)==1) {
    strokeWeight(randomNumber(1,5));
    line(World.mouseX, World.mouseY, World.mouseX+randomNumber(-50,50),World.mouseY+randomNumber(-50,50));
  }
  else {
    strokeWeight(randomNumber(10,30));
    point(World.mouseX, World.mouseY);
  }
}
                        

2 Ways

Demonstrate the two ways to specify the color parameter.

// Demonstrate the two ways to specify the color parameter.

// Sets the stroke using a call to color with an rgba value.
// The last value is the amount of transparency, a number from 0 to 1.
strokeWeight(20);
stroke(rgb(127, 255, 0, 1));
ellipse(200, 200, 100, 400);

// Sets the stroke using the name of a color in a string.
stroke("purple");
point(200, 200);

Syntax

stroke(color)

Returns

No return value. Changes future output to the display only.

Tips

• The default stroke is black, the default stroke weight is 1 pixel, and the default fill is gray. Change the width of the line and color of the fill used to draw all subsequent shapes using strokeWeight() and fill().
• A full list of color names can be found at W3 Schools - Colors.
• For more specific color selection, or to randomize color selection, use rgb() as a parameter to stroke instead of a color name.

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