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:
