When you begin drawing with P5.js, you use built-in shape functions to create visuals on the canvas. The three most fundamental shapes are the rectangle, ellipse, and line. Each shape function takes specific parameters that determine its position and size within the canvas.

The rect() function draws rectangles. Its parameters are: the x-coordinate and y-coordinate of the upper-left corner, followed by the rectangle's width and height. For example, rect(50, 50, 100, 60) draws a rectangle whose top-left corner is at (50, 50), with a width of 100 pixels and a height of 60 pixels.

The ellipse() function draws ellipses (including circles). The parameters are: the x-coordinate and y-coordinate of the center of the ellipse, followed by its width and height. For example, ellipse(250, 100, 80, 120) draws an ellipse centered at (250, 100), with a width of 80 pixels and a height of 120 pixels.

The line() function draws a straight line between two points. Its parameters are: the x-coordinate and y-coordinate of the starting point, followed by the x-coordinate and y-coordinate of the ending point. For example, line(60, 200, 320, 250) draws a line from (60, 200) to (320, 250).

P5.js uses a coordinate system where the origin (0, 0) is at the top-left corner of the canvas. The x-axis increases to the right, and the y-axis increases downward. This system is important to understand as you position and size shapes on your canvas.