# Stamp lower left x and lower left y

**URL:** <https://pdfjs.community/t/stamp-lower-left-x-and-lower-left-y/2649>\
**Category:** Technical Support\
**Created:** [June 16, 2023, 7:05pm UTC](https://pdfjs.community/t/stamp-lower-left-x-and-lower-left-y/2649 "2023-06-16T19:05:35Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![elvisdosreis](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/elvisdosreis/32/311_2.png) [@elvisdosreis](https://pdfjs.community/u/elvisdosreis)\
**Post date:** [June 16, 2023, 7:05pm UTC](https://pdfjs.community/t/stamp-lower-left-x-and-lower-left-y/2649/1 "2023-06-16T19:05:35Z")

</div>

I need to get the orientation of lower left x and lower left y, from the pdf in some cases and it’s simple but there are cases in which the pdf has a different orientation when exported, in which case the dimensions are difficult to calculate,

I can only get that the document has a different orientation when I insert a stamp it comes upside down.

even so I have to do some math to find the position, there is no better way to do this

llx: lower left x  
lly: lower left y

```javascript
annotManager.addEventListener('annotationChanged', async (annots, action, event) => {

        annots.forEach((el) => {
          if (el.cA === this.stampId) {
            const doc = this.docViewer.getDocument();
            const {X, Y, Width, Height, PageNumber, Rotation} = el;
            const {width, height} = doc.getPageInfo(PageNumber);

            const page = {
              number: PageNumber,
              width: Math.round(width),
              height: Math.round(height)
            };

            let image = {
              width: Math.round(Width),
              height: Math.round(Height)
            };
            let margin = {
              llx: Math.round(page.width - (X + image.width)),
              lly: Math.round(page.height - (Y + image.height)),
            };

            if (Rotation === 90) {
              image = {
                width: image.height,
                height: image.width
              };
              margin = {
                llx: Math.round(Y),
                lly: Math.round(page.height - (X + image.height)),
              };
            }

            this.coordinates = {margin, image, page};

            console.log(this.coordinates);
          }

        });
});

```

 ![xy](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/5/58fd120cdfed457949db14b0dc89114ee3473543.png)  
 ![xy-rotate](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/5/57b63eaf7efe7626857ea7ab87a33147f812eb27.png)

[a2.pdf](https://pdfjs.community/uploads/short-url/yssusGR8Svk0VqvSxRHvZOCyqPd.pdf) (1.4 MB)  
[a2\_rotated.pdf](https://pdfjs.community/uploads/short-url/oT3fJIcuwwfPMWrnPBCyU8UsD24.pdf) (20.9 KB)

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [June 16, 2023, 9:23pm UTC](https://pdfjs.community/t/stamp-lower-left-x-and-lower-left-y/2649/2 "2023-06-16T21:23:14Z")

</div>

Hey elvisdosreis,

The page coordinate system is odd in a way, where the 0,0 depends on the rotation of the page, this means that the coordinates do not care about the rotation. For example, if you access (100, 200) in _ **PDF** _ coordinates the resulting area would be the same regardless of rotation

I would convert any X and Y values you are using to PDF page coordinates using

`displayMode.windowToPage(coords, pageNumber)`

Best regards,  
Tyler

---

<div class="post-metadata">

**Author:** ![elvisdosreis](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/elvisdosreis/32/311_2.png) [@elvisdosreis](https://pdfjs.community/u/elvisdosreis)\
**Post date:** [June 16, 2023, 11:04pm UTC](https://pdfjs.community/t/stamp-lower-left-x-and-lower-left-y/2649/3 "2023-06-16T23:04:52Z")

</div>

I believe that windowToPage will not help me because it is affected by the zoom of the page and I don’t know how it would help me to return an llx and lly, I need these pixel values because I will use these coordinates in another program in C# iTextSharp to create a rectangle  
Rectangle(float llx, float lly, float urx, float ury)

```javascript
annots.forEach((el) => {
          if (el.cA === this.stampId) {
            const {X, Y, Width, Height, PageNumber, Rotation} = el;

            const annotCoord = {x: X, y: Y};
            const displayMode = docViewer.getDisplayModeManager().getDisplayMode();
            const annotCoordinates = displayMode.windowToPage(annotCoord, PageNumber);
            console.log('annotCoordinates', annotCoordinates);
          }
});

```

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [June 19, 2023, 6:36pm UTC](https://pdfjs.community/t/stamp-lower-left-x-and-lower-left-y/2649/4 "2023-06-19T18:36:22Z")

</div>

Hello elvisdosreis,

Putting an annotation on the document like so

```javascript
        rectangleAnnot.X = 100;
        rectangleAnnot.Y = 100;
        rectangleAnnot.Width = 100;
        rectangleAnnot.Height = 100;

```

will put the annotation at the correct spot, no matter the rotation  
I have attached a sample project, can you check it out?  
[pdfjs-express-react-sample-master 2.zip](https://pdfjs.community/uploads/short-url/tikMi6S6HRGogwpUKc7cir03aXt.zip) (1.0 MB)

I could be misunderstanding the requirement here, my apologies.

Best regards,  
Tyler

---

<div class="post-metadata">

**Author:** ![elvisdosreis](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/elvisdosreis/32/311_2.png) [@elvisdosreis](https://pdfjs.community/u/elvisdosreis)\
**Post date:** [June 19, 2023, 7:29pm UTC](https://pdfjs.community/t/stamp-lower-left-x-and-lower-left-y/2649/5 "2023-06-19T19:29:08Z")

</div>

@tyler my doubt is not the one you posted, but finding the position of the lower right margin as shown in the attached image, regardless of whether the file is landscape or portrait or if the pdf was rotated by another program that did not record the orientation correctly from the pdf

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [June 19, 2023, 11:48pm UTC](https://pdfjs.community/t/stamp-lower-left-x-and-lower-left-y/2649/6 "2023-06-19T23:48:12Z")

</div>

Hello elvisdosreis,

Wouldnt the lower right position just be the starting point of the annotation plus its with and height?  
X = 100, Y=100, Width=100, height=100  
would mean  
Bottom Right = (200,200)?

but again if you’re using PDF coordinates the rotation does not matter

Best regards,  
Tyler Gordon

---

<div class="post-metadata">

**Author:** ![elvisdosreis](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/elvisdosreis/32/311_2.png) [@elvisdosreis](https://pdfjs.community/u/elvisdosreis)\
**Post date:** [June 20, 2023, 9:50pm UTC](https://pdfjs.community/t/stamp-lower-left-x-and-lower-left-y/2649/7 "2023-06-20T21:50:54Z")

</div>

I got the correct coordinates but only after making some adjustments to the annotation, initially when it loads I don’t have the correct information.  
the file has a boot of 2, how do I read this file property?

```javascript
const viewer = useRef(null);

    // if using a class, equivalent of componentDidMount
    useEffect(() => {
        WebViewer(
            {
                path: '/webviewer/lib',
                // initialDoc: '/files/demo-annotated-0.pdf',
                initialDoc: '/files/demo-annotated-90.pdf',
            },
            viewer.current,
        ).then((instance) => {
            const {docViewer, Annotations} = instance;
            const annotManager = docViewer.getAnnotationManager();

            docViewer.on('documentLoaded', () => {
                const rectangleAnnot = new Annotations.RectangleAnnotation();
                rectangleAnnot.PageNumber = 1;

                const doc = docViewer.getDocument();
                const {width, height} = doc.getPageInfo(1);

                console.log(width, height);

                // values are in page coordinates with (0, 0) in the top left
                rectangleAnnot.X = height - 100;
                rectangleAnnot.Y = 2;
                rectangleAnnot.Width = 100;
                rectangleAnnot.Height = 100;
                rectangleAnnot.Author = annotManager.getCurrentUser();

                annotManager.addAnnotation(rectangleAnnot);
                // need to draw the annotation otherwise it won't show up until the page is refreshed
                annotManager.redrawAnnotation(rectangleAnnot);
            });

            annotManager.addEventListener('annotationChanged', async (items, action, event) => {
                setTimeout(() => {
                    const doc = docViewer.getDocument();
                    items.forEach((el) => {
                        const {X, Y, Width, Height, PageNumber, Rotation} = el;
                        const page = Object.assign({width: 0, height: 0, page: PageNumber}, doc.getPageInfo(PageNumber));
                        const annot = {width: Width, height: Height, rotation: Rotation};
                        const coordinate = {llx: page.height - (X + Width), lly: Y, width: Width, height: Height};
                        console.log('page', page);
                        console.log('annot', annot);
                        console.log('coordinate', coordinate);
                    });
                }, 300)

            });

        });
    }, []);

```

---

<div class="post-metadata">

**Author:** ![elvisdosreis](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/elvisdosreis/32/311_2.png) [@elvisdosreis](https://pdfjs.community/u/elvisdosreis)\
**Post date:** [June 20, 2023, 10:31pm UTC](https://pdfjs.community/t/stamp-lower-left-x-and-lower-left-y/2649/8 "2023-06-20T22:31:31Z")

</div>

I’m finding it difficult to work when the document is rotated, when inserting a stamp it will insert it in the rotation. you have to apply a logic to invert the height and width

```javascript
WebViewer(
            {
                path: '/webviewer/lib',
                // initialDoc: '/files/demo-annotated-0.pdf',
                initialDoc: '/files/demo-annotated-90.pdf',
            },
            viewer.current,
        ).then((instance) => {
            const {docViewer, Annotations} = instance;
            const annotManager = docViewer.getAnnotationManager();

            docViewer.on('documentLoaded', async () => {
                const stampAnnot = new Annotations.StampAnnotation();
                stampAnnot.PageNumber = 1;

                const doc = docViewer.getDocument();
                const {width, height} = doc.getPageInfo(1);

                console.log(width, height);

                // values are in page coordinates with (0, 0) in the top left
                stampAnnot.X = height - 320;
                stampAnnot.Y = 2;
                stampAnnot.Width = 320;
                stampAnnot.Height = 190;
                stampAnnot.Author = annotManager.getCurrentUser();

                //stampAnnot.Rotation = 0;

                stampAnnot.ImageData = 'https://upload.wikimedia.org/wikipedia/commons/a/ad/Wonho-Signature.svg';

                annotManager.addAnnotation(stampAnnot);
                // need to draw the annotation otherwise it won't show up until the page is refreshed
                annotManager.redrawAnnotation(stampAnnot);
            });

            annotManager.addEventListener('annotationChanged', async (items, action, event) => {
                setTimeout(() => {
                    const doc = docViewer.getDocument();
                    items.forEach((el) => {
                        console.log(el);
                        const {X, Y, Width, Height, PageNumber, Rotation} = el;
                        const page = Object.assign({
                            width: 0,
                            height: 0,
                            page: PageNumber
                        }, doc.getPageInfo(PageNumber));
                        let annot = {width: Width, height: Height, rotation: Rotation};
                        const coordinate = {llx: page.height - (X + Width), lly: Y, width: Width, height: Height};
                        console.log('page', page);
                        console.log('annot', annot);
                        console.log('coordinate', coordinate);

                        if(annot.rotation === 90) {
                            annot = {width: Height, height: Width, rotation: Rotation};
                        }
                        console.log('real annot', annot);
                    });
                }, 300)

            });

        });

```

---

<div class="post-metadata">

**Author:** ![elvisdosreis](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/elvisdosreis/32/311_2.png) [@elvisdosreis](https://pdfjs.community/u/elvisdosreis)\
**Post date:** [June 23, 2023, 4:29pm UTC](https://pdfjs.community/t/stamp-lower-left-x-and-lower-left-y/2649/9 "2023-06-23T16:29:41Z")

</div>

I have trouble using this file where it has a totally different orientation, could you please help me.

I pay dearly for the monthly license, but the pdf could have a function that correctly returns these coordinates regardless of the orientation of the document

[DIEGO SOARES 2º ANALISE.pdf](https://pdfjs.community/uploads/short-url/eGMAITX8N77X7fGaZnuNiMmPnw6.pdf) (749.4 KB)

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [June 26, 2023, 9:07pm UTC](https://pdfjs.community/t/stamp-lower-left-x-and-lower-left-y/2649/10 "2023-06-26T21:07:35Z")

</div>

Hi elvisdosreis,

The document that you posted has an internal rotation of 270,  
To get the internal rotation of the document you have to do:

```javascript
documentViewer.getCompleteRotation(pageNumber);

```

If you could provide a sample project, maybe this would clear up the confusion.

Best regards,  
Tyler