p5.js | show() Function

The show() function is an inbuilt function which is used to display the current element. Use setting display: block for style purpose.

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:

show()

Parameters: This function does not accepts any parameters.

Below example illustrates the show() 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 myDiv1 = createDiv('GeeksforGeeks');

  // Set the position of div element
  myDiv1.position(170, 30);

  // Set the div size
  myDiv1.size(200, 100);

  // Set the font-size of text
  myDiv1.style('font-size', '36px');

  // Use createDiv() function to
  // create a div element
  var myDiv = createDiv('A computer science portal for geeks');

  // 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');

  // Hide the div element
  myDiv.hide();

  // Show the div element
  myDiv.show();
}

Output: