p5.js stroke() Function Last Updated : 11 Aug, 2023 Comments Improve Suggest changes Like Article Like Report The stroke() function is used to draw the lines and border around the text and shapes. The color object can be set in terms of RGB or HSB depending on the color mode. The color object can also be set as string in terms of RGB, RGBA, Hex CSS color or named color string. Syntax: stroke( v1, v2, v3, alpha ) or stroke( value ) or stroke( gray, alpha ) or stroke( values ) or stroke( color ) Parameters: v1: It is used to set the red or hue value relative to current color range.v2: It is used to set the green or saturation value relative to current color range.v3: It is used to set the blue or brightness value relative to current color range.alpha: It is used to set the transparency of the drawing.value: It is used to set the value of color string.gray: It is used to set the gray value.values: It is an array containing the red, green, blue and alpha value.color: It is used to set the stroke color. Below examples illustrate the stroke() function in p5.js: Example 1: javascript function setup() { // Create Canvas of given size createCanvas(400, 200); } function draw() { // Set the background color background(220); // Set the stroke width strokeWeight(10); // Set the stroke stroke('green'); // Set the filled color fill('white'); // Draw the circle circle(90, 90, 34); // Set the text size textSize(20); // Set the text to print text("GeeksForGeeks", 140, 100); } Output: Example 2: javascript function setup() { // Create Canvas of given size createCanvas(400, 200); } function draw() { // Set the background color background(220); // Set the stroke color stroke('orange'); // Set the stroke width to 10 strokeWeight(30); // Orange // Draw a line line(100, 50, 300, 50); // Set the stroke color stroke('white'); // Set the stroke width to 8 strokeWeight(30); // White // Draw a line line(100, 100, 300, 100); // Set stroke color stroke('green'); // Set the stroke width to 6 strokeWeight(30); // Green // Draw a line line(100, 150, 300, 150); } Output: Reference: https://p5js.org/reference/#/p5/stroke Comment More infoAdvertise with us Next Article p5.js strokeJoin() function J jit_t Follow Improve Article Tags : JavaScript Web Technologies JavaScript-p5.js Similar Reads p5.js strokeCap() Function The strokeCap() function in p5.js is used to set the style of line endings. The ends of line can be rounded, squared or extended based on their parameters SQUARE, PROJECT, and ROUND. The default value is ROUND. Syntax: strokeCap( cap ) Parameters: This function accepts single parameter cap which hol 1 min read p5.js strokeJoin() function The strokeJoin() function in p5.js is used to set the joint style which connect the line segments. These joints are either mitered, beveled, or rounded and specified with the corresponding parameters MITER, BEVEL, and ROUND. MITER is the default joint. Syntax: strokeJoin(join) Parameters: This funct 2 min read p5.js strokeWeight() function The strokeWeight() function in p5.js is used to set the width of the stroke used for lines, points and the border around shapes. The stroke weight is set by using pixels. Syntax: strokeWeight(weight) Parameters: This function accepts a single parameter weight which stores the weight (in pixels) of 2 min read p5.js square() Function The square() function is an inbuilt function in p5.js which is used to draw the square on the screen. A square contains four equal sides and four angles each of 90 degrees. It is the special case of a rectangle where width and height are equal. Syntax: square( x, y, s, tl, tr, br, bl ) Parameters: T 2 min read p5.js square() Function The square() function is an inbuilt function in p5.js which is used to draw the square on the screen. A square contains four equal sides and four angles each of 90 degrees. It is the special case of a rectangle where width and height are equal. Syntax: square( x, y, s, tl, tr, br, bl ) Parameters: T 2 min read p5.js rect() Function The rect() function is an inbuilt function in p5.js which is used to draw the rectangle on the screen. A rectangle contains four sides and four angles. Each angle of the rectangle is 90 degree. The length of the opposite sides of rectangles are equal.  Syntax:  rect( x, y, w, h, tl, tr, br, bl ) o 2 min read Like