# Mouse Coordinates / Annotations Coordinates

**URL:** <https://pdfjs.community/t/mouse-coordinates-annotations-coordinates/1014>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [September 30, 2021, 2:46pm UTC](https://pdfjs.community/t/mouse-coordinates-annotations-coordinates/1014 "2021-09-30T14:46:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![drevel](https://avatars.discourse-cdn.com/v4/letter/d/ee59a6/32.png) [@drevel](https://pdfjs.community/u/drevel)\
**Post date:** [September 30, 2021, 2:46pm UTC](https://pdfjs.community/t/mouse-coordinates-annotations-coordinates/1014/1 "2021-09-30T14:46:21Z")

</div>

Dear Support,

I’m trying to use the mouse Events raised by the WebViewer in order to add some annotations into my document.  
Code below is working excepted that there is a shift between the position of my freeText and the mouse coordinates…  
How could I do to make the position of the annotation match with the position of my mouse cursor when there is a mouseUp Event.

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/0d159d1432c93dcab73ea50915bf02bc229a5f28.png)

Many Thanks in advance for your kind support

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [September 30, 2021, 2:46pm UTC](https://pdfjs.community/t/mouse-coordinates-annotations-coordinates/1014/2 "2021-09-30T14:46:25Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:
- [Rich text](https://pdfjs.express/documentation/annotation/rich-text.8)
- [PDF.js Express annotations](https://pdfjs.express/documentation/annotation/overview)
- [Import and export annotations using files](https://pdfjs.express/documentation/annotation/import-export/files)

APIs:
- [Core.Annotations.CustomAnnotation - new CustomAnnotation(type [, initializer])](https://pdfjs.express/api/Core.Annotations.CustomAnnotation.html#CustomAnnotation__anchor)
- [Core](https://pdfjs.express/api/Core.html#__anchor)
- [Core.Annotations.RadioButtonWidgetAnnotation - new RadioButtonWidgetAnnotation(field, options)](https://pdfjs.express/api/Core.Annotations.RadioButtonWidgetAnnotation.html#RadioButtonWidgetAnnotation__anchor)

Forums:
- [Can fitText be used to set only height? If not, is there an alternative](https://pdfjs.community/t/can-fittext-be-used-to-set-only-height-if-not-is-there-an-alternative/896/1)
- [Why it takes 2-3 minutes to save annotations to a PDF file?](https://pdfjs.community/t/why-it-takes-2-3-minutes-to-save-annotations-to-a-pdf-file/563/1)
- [Error when switching between files in react WebViewer: Annotations from previous doc stay in the viewer](https://pdfjs.community/t/error-when-switching-between-files-in-react-webviewer-annotations-from-previous-doc-stay-in-the-viewer/873/1)

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [October 4, 2021, 6:52pm UTC](https://pdfjs.community/t/mouse-coordinates-annotations-coordinates/1014/3 "2021-10-04T18:52:18Z")

</div>

Hi!

You are super close, there are just a couple extra steps you need to do. Converting mouse coordinates to page coordinates is a bit tricky because there is a lot to take into account - zoom, page rotation, page dimensions etc.

Here is some code that converts mouse coordinates to page coordinates:

```javascript
const getMouseLocation = e => {
    const scrollElement = instance.docViewer.getScrollViewElement();
    const scrollLeft = scrollElement.scrollLeft || 0;
    const scrollTop = scrollElement.scrollTop || 0;
  
    return {
      x: e.pageX + scrollLeft,
      y: e.pageY + scrollTop
    };
  };

  instance.docViewer.on('click', e => {

    const windowCoordinates = getMouseLocation(e);
    const displayMode = docViewer.getDisplayModeManager().getDisplayMode();
    const page = displayMode.getSelectedPages(windowCoordinates, windowCoordinates);
    const clickedPage = (page.first !== null) ? page.first : docViewer.getCurrentPage();

    const pageCoordinates = displayMode.windowToPage(windowCoordinates, clickedPage);

    const freetext = new instance.Annotations.FreeTextAnnotation();

    freetext.X = pageCoordinates.x ; // <---
    freetext.Y = pageCoordinates.y ; // <---

  })

```

I hope this helps!  
Logan

---

<div class="post-metadata">

**Author:** ![mustapha](https://avatars.discourse-cdn.com/v4/letter/m/d6d6ee/32.png) [@mustapha](https://pdfjs.community/u/mustapha)\
**Post date:** [February 24, 2023, 2:39pm UTC](https://pdfjs.community/t/mouse-coordinates-annotations-coordinates/1014/4 "2023-02-24T14:39:33Z")

</div>

and where is that code supposed to go if i want to use it too?

---

<div class="post-metadata">

**Author:** ![mustapha](https://avatars.discourse-cdn.com/v4/letter/m/d6d6ee/32.png) [@mustapha](https://pdfjs.community/u/mustapha)\
**Post date:** [February 24, 2023, 2:58pm UTC](https://pdfjs.community/t/mouse-coordinates-annotations-coordinates/1014/5 "2023-02-24T14:58:24Z")

</div>

when i paste this into the WebViewer.Vue file where the other eventListeners are, nothing happens