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