Sunday, December 29, 2024
Google search engine
HomeLanguagesJavascriptp5.js textStyle() Function

p5.js textStyle() Function

The textStyle() function in p5.js is used to set or return the style of the text for system fonts to NORMAL, ITALIC, BOLD, or BOLDITALIC. This may be overridden by CSS styling. 

Syntax:

textStyle(style)

or

textStyle()

Parameters: This function accepts a single parameter style that stores the styling Constant. 

The below programs illustrate the textStyle() function in p5.js.

Example 1: This example uses the textStyle() function to set the style of text. 

javascript




function setup() {
      
    // Create Canvas of given size
    createCanvas(380, 170);
}
  
function draw() {
      
    let string = "neveropen";
      
    // Set the background color
    background(220);
      
    // Set the text style
    textStyle(ITALIC);
      
    // Set the text size
    textSize(16);
      
    // Set the text 
    text(string, 20, 30);
  
    // Set text styling
    textStyle(BOLD);
      
    text(string, 20, 70);
  
    // Set text styling
    textStyle(BOLDITALIC);
      
    text(string, 20, 110);
}


Output: 

Example 2: This example uses the textStyle() function to return the style of text. 

javascript




function setup() {
      
    // Create Canvas of given size
    createCanvas(380, 170);
}
  
function draw() {
      
    let string = "neveropen";
      
    // Set the background color
    background(220);
      
    // Set text style
    textStyle(BOLD);
      
    // Set the text size
    textSize(16);
  
    // Get the value of text style
    var u = textStyle();
      
    // Set the stroke color
    stroke(255, 204, 0);
      
    // Display the result
    text("Value of Text Style is : " + u, 50, 30);
}


Output: 

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

RELATED ARTICLES

Most Popular

Recent Comments