The Processing/p5.js canvas places the origin at the top-left with y increasing downward

The Processing and p5.js display canvas uses a screen-space coordinate system where the origin (0,0) is the top-left corner: the x-axis increases to the right and the y-axis increases downward. This is inverted from the Cartesian plane taught in mathematics, where y grows upward — so placing a shape lower on screen requires a larger y value, and moving a shape ‘upward’ requires decreasing y. Every shape-drawing function takes coordinates in this screen space. The canvas size is set by createCanvas(width, height) in p5.js or size(width, height) in Processing, and the dimensions are available afterward as the system variables width and height. Anchor points differ by primitive: circle(x,y,d) and ellipse(x,y,w,h) are anchored at their center, while rect(x,y,w,h) is anchored at its top-left corner. The common misconception is assuming y increases upward.

Examples

createCanvas(400, 400);
circle(200, 200, 80); // center of canvas
rect(0, 0, 50, 50);   // top-left square
text('hi', 0, 20);    // baseline at y=20

Processing equivalent: size(100,100); ellipse(50,50,30,30); rect(0,0,50,50); — y=90 places a shape near the bottom, not the top.

Assessment

Draw a circle in the bottom-right quadrant of a 400×400 canvas: predict the x,y coordinates and which direction to change y to move it upward, then verify. Explain why y=90 places a shape near the bottom of a 100-tall canvas rather than the top, and how the anchor point differs between rect() and circle()/ellipse().