Extract Element Coordinates from a Generated PDF for E-Signatures

Updated October 27, 2026 · 6 min read

Signature boxes, initials, date fields, and “sign here” tabs are positioned relative to content that moves. If a contract grows by one clause, a hardcoded signature coordinate lands in the wrong place. Parsing the finished PDF with OCR or a second layout engine adds latency and still guesses.

Fork PDF keeps the rendered layout map. You can query a signature element after pagination and return its page number and bounding box in the same API response that produces the PDF.

1. Query the signature element

Give the signature block a stable selector and read it inside the test case:

const sig = doc.querySelector('#signature-box');

if (!sig || !sig.geometry) {
  return { success: false, reason: 'Signature box not found' };
}

return {
  success: true,
  signature: {
    page: sig.pages[0] + 1,
    x: sig.geometry.x,
    y: sig.geometry.y,
    width: sig.geometry.width,
    height: sig.geometry.height
  }
};

The result arrives under testResults in the API response and the webhook payload. A signature on the fifth page returns page: 5, because pages is 0-indexed and the example adds 1.

2. Understand the coordinate space

• Units: geometry is in PDF points (1/72 inch), not CSS pixels. A 100 CSS-pixel box is about 75 points wide.
• Origin: the bottom-left corner of the full page. y increases upward.
• Page size: use printableWidth/printableHeight for geometry math. pageWidth/pageHeight are CSS content-box pixels and will put your overlay in the wrong place.

3. Map the box to a raster image

If you display the PDF as a PNG and draw an overlay, convert from PDF points to image pixels:

// imageWidth is the rendered PNG width in pixels
const scale = imageWidth / doc.printableWidth;

const xPx = sig.geometry.x * scale;
const yPx = (doc.printableHeight - sig.geometry.y - sig.geometry.height) * scale;
const widthPx = sig.geometry.width * scale;
const heightPx = sig.geometry.height * scale;

The y flip is the part that catches most overlays: PDF coordinates grow upward from the bottom, image coordinates grow downward from the top.

4. Return any keys you need

The test case return value is not limited to success. Custom keys are routed into testResults, so you can return a signature box, a date field, and a totals anchor in one pass:

{
  "success": true,
  "signature": {
    "page": 5,
    "x": 338.86,
    "y": 622.34,
    "width": 199.4,
    "height": 70.47
  },
  "totals": {
    "page": 4,
    "x": 326.11,
    "y": 319.48
  }
}

The Q3 report example returns a real signature box from a 5-page report. The Spatial Queries reference covers every node property and the raster formula in more detail.

Common mistakes

• Treating geometry as CSS pixels; it is PDF points.
• Using pageWidth/pageHeight to map the page; use printableWidth/printableHeight.
• Forgetting the + 1 for a human-readable page number.
• Querying an element without checking geometry; hidden or zero-size nodes may not have layout.