Creating a custom layer on top of each pdf page

[kobalt42z]

Hi everyone, and thanks for publishing this library!

I'm trying to create a custom layer so I can draw arbitrary shapes or selections on a PDF. The idea is to allow users to mark areas using:

• Text selection
• Drawing rectangles or polygons

These marked areas will later be removed by a Python backend, so we can flexibly redact any part of the document.

My main challenge is translating the bounding box coordinates between the web viewer and the actual PDF document.

Question:
How can I add a custom overlay (similar to the text layer) that matches the exact position of the PDF content, regardless of the zoom level? My goal is that when a user selects text or draws a shape, it will be positioned precisely above the PDF content. Then, when sending instructions (e.g., via JSON) to the backend, the server will know exactly what regions to remove from the PDF file.

Has anyone implemented something like this, or does anyone have tips for mapping coordinates between the web layer and the PDF layer accurately?

Thanks!

[stephanrauh]

If you've activated the full range of options, that's quite a challenge:

• Coordinate System Differences: PDF uses bottom-left origin, web uses top-left
• Scale Handling: you must account for zoom level changes
• Rotation: Handle document rotation if supported
• Multi-page: Each page needs its own coordinate space
• Text Layer Integration: If selecting text, use existing text layer coordinates

I know it sounds lazy (and it is), but your task is a perfect match to using an LLM. I've asked Claude, and it emits a lot of code that sounds reasonable. It's too much code to put it here - but I recommend you ask an AI you trust to tell you how to do that.

In the long run, I should add a demo to the showcase, because that seems to be a popular use-case. In the short run, I'm short of time, so please apologize me for asking you to ask an AI.

One last hint: the AIs are using history training data, so they'll use outdated APIs, like window.PDFViewerApplication. Take the answers with a grain of salt and insist of using the latest API and researching it in the Internet.