I would like direction on how to display the content of a PDF in the web browser and allow the user to annotate the content and save the position(coordinates) of the annotation in a database so it can be re-used when the page is reloaded.

Display the PDF is not an issue. However how do I go about drawing a circle or any other shape and save these annotations into a database?

I found some licensed products such as PDFTron but its very expensive.

I've been doing some research on this topic but it doesn't seems to be a very straight forward thing to do. Maybe I am missing something here.

Not concerned about the tech-stack here, javascript, node, ruby or python it doesn't matter. Even if the pdf will have to be converted to HTML or something else that is fine too. The end goal is to allow the user to annotate the content and save.

Can someone point me on the right direction to achieve this?

Thanks