In p5.js WEBGL mode the coordinate origin is at the canvas center, not the top-left

Switching to WEBGL mode (createCanvas(w,h,WEBGL)) moves the origin (0,0,0) to the middle of the screen rather than the top-left used in 2D mode. By default the x-axis goes left to right, the y-axis top to bottom, and the z-axis from farther to closer, out of the screen. Beginners porting 2D sketches must compensate — subtract width/2 and height/2 from coordinates, or translate() the origin back to the top-left. A shape at (0,0,0) appears at the canvas center.

Examples

function setup() { createCanvas(400, 400, WEBGL); } function draw() { background(0); box(100); // cube appears at center push(); translate(-200,-200,0); box(50); pop(); // now at top-left }

Assessment

A 2D rect(0,0,50,50) sits at the top-left. Where does the same call appear after adding WEBGL to createCanvas? Fix it to appear at the top-left.