Skip to content
geeksforgeeks
  • Tutorials
    • Python
    • Java
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
    • Practice Coding Problems
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • p5.js-Environment
  • p5.js-Color
  • p5.js-Shape
  • p5.js-Constants and Structure
  • p5.js-DOM and Rendering
  • p5.js-Transform
  • p5.js-Data
  • p5.js-Events
  • p5.js-Image
  • p5.js-IO
  • p5.js-Math
  • p5.js-Typography
  • p5.js-Lights & Camera
  • JavaScript
  • Web Technology
Open In App
Next Article:
p5.js strokeWeight() function
Next article icon

p5.js strokeWeight() function

Last Updated : 11 Aug, 2023
Comments
Improve
Suggest changes
Like Article
Like
Report

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 the stroke. The below programs illustrate the strokeWeight() function in p5.js: 

Example 1: This example uses strokeWeight() function to set the width of the stroke. 

javascript
function setup() {      // Create Canvas of given size     createCanvas(380, 170); }  function draw() {      // Set the background color     background(220);      // Set the stroke width     strokeWeight(20);      // Set the filled color     fill('green');      // Draw the circle     circle(60, 60, 34);      // Set the text size     textSize(20);      // Set the text to print     text("GeeksForGeeks", 120, 70); } 

Output: 

Example 2: This example uses strokeWeight() function to set the width of the stroke. 

javascript
function setup() {          // Create Canvas of given size     createCanvas(380, 170); }  function draw() {          // Set the background color     background(220);          // Set the stroke color     stroke('orange');          // Set the stroke width to 10     strokeWeight(10); // Orange          // Draw a line     line(20, 70, 80, 70);          // Set the stroke color     stroke('white');          // Set the stroke width to 8     strokeWeight(8); // White          // Draw a line     line(20, 90, 80, 90);          // Set stroke color     stroke('green');          // Set the stroke width to 6     strokeWeight(6); // Green          // Draw a line     line(20, 110, 80, 110); } 

Output: 

Reference: https://p5js.org/reference/#/p5/strokeWeight


Next Article
p5.js strokeWeight() function

S

sarthak_ishu11
Improve
Article Tags :
  • JavaScript
  • Web Technologies
  • JavaScript-p5.js

Similar Reads

    p5.js stroke() Function
    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, al
    2 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 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 textWidth() Function
    The textWidth() function is used to calculate the width of the text given as parameter.  Syntax: textWidth( theText ) Parameters: This function accepts a single parameter as mentioned above and described below: theText: It holds the string of which the width has to be measured. Return Value: It retu
    2 min read
    p5.js point() Function
    The point() function is an inbuilt function in p5.js which is used to draw the point in a given coordinate position. Syntax: point( x, y, [z]) Parameters: This function accept three parameters which are described below x: It is used to set the x-coordinate of point. y: It is used to set the y-coordi
    1 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences