Docs › Helpers

🔧 Helpers

Tools to help you build and debug your sketches. These are not part of your game — they're overlays that help you understand the coordinate system and position things.

gridHelper(gridSize?, gridColor?, labelColor?, markerColor?)

Shows a coordinate grid overlay on your canvas with a crosshair that follows your mouse. Super useful when you're trying to figure out where to place shapes! Call it once in setup() and it stays on every frame.

ParameterTypeDescription
gridSizeoptionalnumberSpacing between grid lines in pixels (default: 50)
gridColoroptionalstringColor of the grid lines (default: "rgba(0,0,0,0.15)")
labelColoroptionalstringColor of the number labels (default: "rgba(0,0,0,0.4)")
markerColoroptionalstringColor of the crosshair and coordinate label (default: "red")
Tip: Click on the canvas to pin the crosshair in place so you can read the exact coordinates. Use arrow keys to nudge it 1 pixel at a time. Click again to unpin. Pass { gridSize: 25 } for a finer grid, or { markerColor: "blue" } to change the crosshair color. Remove the gridHelper() call when you're done positioning things!
function setup() {
  size(400, 300);
  gridHelper();
}

function draw() {
  background("skyblue");
  fill("tomato");
  circle(200, 150, 40);
  fill("gold");
  rect(50, 50, 80, 60);
}