strokeWeight()

Sets the width of the stroke used for lines, points, and the border around shapes.

The stroke weight controls, for the future drawing, the thickness of lines drawn with line(), point(), and borders around shapes. The width is measured in pixels. As the stroke width increases, the lines drawn get thicker equally on both sides. Any lines or shapes that have already been drawn are not affected.

Examples

// Draw two parallel lines that start and end at the same x coordinates, but have different stroke widths. 
// Because the lines have rounded ends, the thicker line is in fact longer than the thinner line.
line(120, 50, 200, 50);
strokeWeight(20);
line(120, 75, 200, 75);

More Border than Fill

Draw a rectangle with a wide stroke so almost none of the fill color is shown.

// Draw a rectangle with a wide stroke so almost none of the fill color is shown. 
stroke("yellow");
strokeWeight(40);
rect(0, 50, 320, 50);

Down the Middle

Draw two lines with the same start and end point, but with different stroke widths. Thicker strokes expand the line equally on both sides.

// Draw two lines with the same start and end point, but with different stroke widths.
// Thicker strokes expand the line equally on both sides.
stroke("lightblue");
strokeWeight(20);
line(0, 50, 320, 50);
stroke("black");
strokeWeight(1);
line(0, 50, 320, 50);

                            // Use the draw() function to animate an oscillating line.
var number = 0;
var count=0;
function draw() {
  background("white");
  strokeWeight(number);
  line(100, 100, 100, 200);
  count=count+1;
  if (count<=10) {
      number=number+1;
  }
  else if (count<=20){
    number=number-1;
  }
  else if (count>20) {
    count=0;
  }
}
                        

Syntax

strokeWeight(size)

Returns

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

Tips

• strokeWeight only affects future drawing.
• The default strokeWeight is 1 pixel.
• When drawing thick lines, the width and length of the shape is relative to the center of the perimeter line. The outside perimeter of the shape will be one half the stroke weight larger than the shape's defined dimensions all around.
• noStroke() is used to turn off line drawing.

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