I make a feature to input comments above a pdf on the canvas by double clicking on the part of the pdf that you want to comment.

So the order of these features is:

1. User double clicks on the section to be commented. (Solved)
2. and then a form will appear to input comments and get page information, X & Y. (Solved)
3. after the document is sent to someone else, the location of the comment icon is different from the previous one.

For Simulation :

1. User Creator(U1) input comment on Page=2, X=50, Y=110.13333129882812 Icon showed on top page.
2. When another user (U2) want to view the document, the Icon showed on bottom page.

My Question is : Why does the icon appear at a the bottom of the page.

This is my Code :

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
            } 
        }

    });  
}