Ask Anvil

What is actually going wrong

You pass an x and a y to place the field, but it appears mirrored vertically: a field meant for the top of the page shows up near the bottom, or slides off the page. The coordinates are not wrong, they are measured from the wrong corner. In the PDF format, the origin (0, 0) is the bottom-left corner and the y-axis increases upward. Screen coordinates, HTML overlays, and most image tools put (0, 0) at the top-left with y increasing downward. Place a field with top-left numbers and the renderer reads them as bottom-left numbers, so everything flips.

Flip the y-axis

PDF coordinates are measured in points, where 1 point is 1/72 inch. To convert a rectangle you captured from a top-left system, subtract the top y and the field height from the page height:

// PDF origin is bottom-left; UI tools usually give top-left coords.
// Convert a top-left rectangle to PDF (bottom-left) coordinates.
function toPdfRect(pageHeight, topLeftX, topLeftY, width, height) {
  return {
    x: topLeftX,
    y: pageHeight - topLeftY - height, // flip the y-axis
    width,
    height,
  };
}

// US Letter is 792 points tall (11 in x 72).
// A 20pt-tall field, 50pt from the top of the page:
console.log(toPdfRect(792, 100, 50, 200, 20));
// -> { x: 100, y: 722, width: 200, height: 20 }

The x value carries over unchanged. Only the vertical axis needs flipping.

Check the page, not just the point

If the field is on the right axis but still off, three things are usually behind it. First, the page index: most libraries are zero-based, so page 1 is index 0. Second, page size: US Letter pages are 792 points tall and A4 pages about 842, so a hard-coded height throws every field off on the other format. Third, page rotation: a page with a /Rotate value of 90 or 270 displays turned, so a field placed in unrotated coordinate space can appear in a different spot than the visible layout suggests. Match the origin, the page, and the rotation, and the field lands where you drew it.