The position() function is used to set the position of the element relative to origin (0, 0) coordinate. If this function is not containing any parameters then it returns the x and y position of the element.
Note: This function requires the 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:
position()
or
position( x, y )
Parameters:
- x: This parameter holds the x-position relative to top-left of window.
- y: This parameter holds the y-position relative to top-left of window.
Return Value: This function returns an object containing the x and y position of the element.
Below examples illustrate the position() function in p5.js:
Example 1:
function setup() {           // Create canvas of given size     createCanvas(400, 200);           // Set background color     background('green');           // Create an input element     var div_cont = createDiv('Welcome to neveropen');           // Set the position of div element     div_cont.position(60, 80);         // Set font color     div_cont.style('color', '#ffffff');          // Set width of input field     div_cont.style('width', '250px');         // Set font-size of input text     div_cont.style('font-size', '20px');   } |
Output:
Example 2:
function setup() {           // Create canvas of given size     createCanvas(400, 200);           // Set background color     background('green');           // Create an input element     var input_val = createInput('');              // Set the attribute and its value        input_val.attribute('value', 'Welcome to neveropen');          // Set the position of div element     input_val.position(60, 80);         // Set width of input field     input_val.style('width', '250px');         // Set font-size of input text     input_val.style('font-size', '20px');   } |
Output:
