Question :

Creating/Drawing/Marking Red Colour Circle on PDF Document.

I’m working on a React application, Which need to allow user to create/draw/mark a Red Circle, Where ever the user click on uploaded PDF Document. Which also allows the user to save and download the PDF with marking.

I’m using the react-pdf package to render the PDF on the browser and pdf-lib to handle the PDF modifications/download. However, I’m facing an issue where the markers I place on the rendered PDF do not align correctly when the PDF downloaded.

My current setup:
1.Rendering the PDF: I use react-pdf to display the PDF.
2.Marking on click: I capture mouse clicks on the PDF and place markers based on the dimensions of the rendered PDF.
3.Downloading the PDF: I use pdf-lib to add these markers to the PDF and then download it.

rendered pdf
downloaded pdf with markers

What I’ve tried:
1.Adjusting the coordinates by considering the scaling factor and page dimensions. But if adjust the co-ordinates means its not responsive all screen sizes.
2.Logging the coordinates to see if there’s a pattern or offset.

What I’m looking for:
1.A package or method that can handle PDF rendering, marking, and downloading while ensuring the coordinates match.
2.Suggestions Or Code Snippets on how to properly sync the coordinates between react-pdf and pdf-lib.