Context: I render a pdf into a canvas at its original size using PDF.js, I also made the container of the canvas the same size as the canvas, and without border. At some location [top, left], I position a text element with absolute positioning within the container of the canvas (on top of the canvas) and using the coordinates, I want to render that text at the same location on the pdf using pdf-lib.
Problem: For some reason the location that the text is rendered on the PDF is different from the location it is positioned in the HTML with absolute positioning. I used this formula:
pdfXLocation = elemLeftLocation;
pdfYLocation = PDFHeight - elemTopLocation;
The left location seems to align properly between the HTML and the PDF, but the top location has some offset from which I can't seem to figure out where it's coming from (HTML/PDF?).
From my research, I know that PDF.js renders the pdf at 72DPI and I also render it at a scale of 1, which is the original size of the PDF, so I can't figure out where this offset is coming from in the top location. I also have seen that I don't need to do any division by DPI since the DPI that PDF.js uses is the standard DPI for PDFs when converted to images.
Please help me figure out where this offset is coming from and how to convert these HTML coordinates to PDF coordinates. I have spent about 2 days on this particular issue.
Here's a repository I was using to test this on with this approach
Thanks
Update: So I found out that, I was not adding the height of the text to the calculations, which is where the offset was coming from.
The formula is supposed to be like this:
pdfXLocation = elemLeftLocation;
pdfYLocation = PDFHeight - (elemTopLocation + textHeight);
textHeight is gotten from measuring the text at a certain size using pdf-lib helper functions.