Hago una función para ingresar comentarios sobre un pdf en el lienzo haciendo doble clic en la parte del pdf que desea comentar.

Así que el orden de estas características es:

1. El usuario hace doble clic en la sección a comentar. (Resuelto)
2. y luego aparecerá un formulario para ingresar comentarios y obtener información de la página, X e Y. (Resuelto)
3. después de enviar el documento a otra persona, la ubicación del icono de comentario es diferente a la anterior.

Para simulación:

1. El creador del usuario (U1) ingresó el comentario en la página = 2, X = 50, Y = 110.13333129882812 El ícono se mostró en la página superior.
2. Cuando otro usuario (U2) quiere ver el documento, el ícono se muestra en la página inferior.

Mi pregunta es: ¿Por qué aparece el icono en la parte inferior de la página?

Este es mi código:

 PDFJS.getDocument(url).promise.then(function (pdf) { thePdf = pdf; viewer = document.getElementById('pdf-viewer'); for (page = 1; page <= pdf.numPages; page++) { canvas = document.createElement("canvas"); canvas.className = 'pdf-page-canvas'; var setid = "iscanvas_" + page; canvas.setAttribute("id", setid); canvas.setAttribute("ondblclick", "FormComment(event, " + page + ")"); viewer.appendChild(canvas); renderPage(page, canvas); } }); function renderPage(pageNumber, canvas) { thePdf.getPage(pageNumber).then(function (page) { viewport = page.getViewport({ scale: scale }); canvas.height = viewport.height; canvas.width = viewport.width; page.render({ canvasContext: canvas.getContext('2d'), viewport: viewport }); if (pageNumber == 2) { var canvas2 = document.querySelector('#iscanvas_1'); var ctx = canvas2.getContext('2d'); var img = new Image(); img.src = "../Content/Images/add.png"; var x = 50; var y = 110.13333129882812; img.onload = function () { ctx.drawImage(img, x, y); <=== I try to research in here } } }); }