Shapes have another color as well—stroke!
The stroke is the color used to draw lines or the borders around shapes. All the shapes we have seen so far are drawn with a default stroke color of black. You can set the stroke color with the stroke() function the same way we did for the fill() function. It takes a color as input and must be called before drawing the shape.
The thickness of strokes can be set with the strokeWeight() function. The strokeWeight() function takes a numeric value as input for the width in pixels.
You can disable the stroke from being drawn by calling the noStroke() function.
Instructions
In the p5.js sketch to the right, set the top-left line’s stroke color to green in RGB notation by calling the stroke() function before the shape is drawn.
A single pixel is too hard to see! Set the top-right point’s stroke weight to 100 pixels.
Now all the shapes have a stroke of 100 pixels! Return top-left line’s stroke weight to 1 pixel.
Let’s change the triangle’s stroke setting. Set the bottom-left triangle’s stroke color to 'red' and stroke weight to 5 pixels.
Lastly, set the bottom-right circle to have no stroke.