p5.js height variable

0 1 1 minute read

The height variable in p5.js is a system variable which stores the height of the drawing canvas. It sets the second parameter of createCanvas() function.

Syntax:

height

Below programs illustrate the height variable in p5.js:

Example 1: This example uses height variable to display the height of canvas.

function setup() { 
      
    // Create Canvas of size 380*80   
    createCanvas(380, 80); 
} 
   
function draw() { 
      
    // Set the background color 
    background(220); 
      
    // Set the text size 
    textSize(16); 
      
    // Set the text alignment 
    textAlign(CENTER); 
      
    // Set the text color 
    fill(color('Green')); 
      
    // Display result 
    text("Height of Canvas is : "
        + height, 180, 50); 
}  

Output:

Example 2: This example uses height variable to display the height of window.

function setup() { 
  // set height to window height  
height = windowHeight; 
  //create Canvas of size 380*80  
  createCanvas(380, height); 
} 
  
function draw() { 
  background(220); 
  textSize(16); 
  textAlign(CENTER); 
  fill(color('Green')); 
  text("Height of Canvas is : "+height, 180, height/2); //use of height variable 
} 

Output:

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!