Tuesday, November 19, 2024
Google search engine
HomeLanguagesJavascriptp5.js | size() Function

p5.js | size() Function

The size() function is an inbuilt function which is used to set the width and height of the element. The AUTO is used to set one dimension at a time. If the arguments of size() function are not given then it returns the width and height of the element in an object.

This function requires p5.dom library. So add the following line in the head section of the index.html file.




<script language="javascript"
    type="text/javascript" src="path/to/p5.dom.js">
</script>


Syntax:

size()

or

size( w, h )

Parameters: This function accepts two parameters as mentioned above and described below:

  • w: This parameter holds the width of the element, either AUTO, or a number.
  • h: This parameter holds the height of the element, either AUTO, or a number.

Return Value: This function returns the width and height of the element in an object.

Below example illustrates the size() function in p5.js:

Example:




function setup() {  
     
    // Create Canvas of given size 
    var cvs = createCanvas(600, 250);
}
  
function draw() {
    
  // Set the background color
  background('green'); 
    
  // Use createDiv() function to
  // create a div element
  var myDiv = createDiv('Welcome to neveropen');
    
  // Set the position of div element
  myDiv.position(180, 80);  
    
  // Set the div size
  myDiv.size(200, 100);
    
  // Set the font-size of text
  myDiv.style('font-size', '24px');
    
  // Set the font-size of text
  myDiv.style('border', '1px solid black');
    
  // Set the font-size of text
  myDiv.style('text-align', 'center');
    
  // Set the font color
  myDiv.style('color', 'white');
    
}


Output:

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