# WebViewer rotation issue

**URL:** <https://pdfjs.community/t/webviewer-rotation-issue/338>\
**Category:** Technical Support\
**Created:** [October 15, 2020, 9:15am UTC](https://pdfjs.community/t/webviewer-rotation-issue/338 "2020-10-15T09:15:27Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![blocko\_developers](https://avatars.discourse-cdn.com/v4/letter/b/e9bcb4/32.png) [@blocko\_developers](https://pdfjs.community/u/blocko_developers)\
**Post date:** [October 15, 2020, 9:15am UTC](https://pdfjs.community/t/webviewer-rotation-issue/338/1 "2020-10-15T09:15:27Z")

</div>

When the sample pdf is loaded in the viewer, it is thought that the coordinate values ​​are rotated.  
So, if you draw the annotation with the coordinate value, it is rotated and shown.  
Please tell me how to draw it as if it wasn’t rotated.\>

**PDF.js Express Version**  
7.1.0

**Detailed description of issue**  
When the sample pdf is loaded in the viewer, it is thought that the coordinate values ​​are rotated.  
So, if you draw the annotation with the coordinate value, it is rotated and shown.

**Expected behaviour**

1. Get rotation information
2. Coordinate transformation according to rotation  
3.Drawing annotation by reflecting rotation

**Link to document**

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

**Code snippet**

```
const windowCoordinates = {x: e.pageX + scrollLeft, y: e.pageY + scrollTop };

const displayMode = instance.docViewer.getDisplayModeManager().getDisplayMode();
const page = displayMode.getSelectedPages(windowCoordinates, windowCoordinates);
const clickedPage = (page.first !== null) ? page.first : instance.docViewer.getCurrentPage() - 1;
const pageCoordinates = displayMode.windowToPage(windowCoordinates, clickedPage);

```

…

```
  newAnnot = new Annotations.FreeTextAnnotation();
  newAnnot.Width = 100;
  newAnnot.Height = 100;
  newAnnot.X = pageCoordinates.x;
  newAnnot.Y = pageCoordinates.y;
  newAnnot.FontSize = fontSize;
  newAnnot.TextColor = new Annotations.Color(0, 0, 0);
  newAnnot.setPadding(new Annotations.Rect(0, 0, 0, 0));
  newAnnot.StrokeThickness = 0;

```

Sample PDF:  
[https://www.fsc.go.kr/downManager?bbsid=BBS0030&no=106789](https://www.fsc.go.kr/downManager?bbsid=BBS0030&no=106789)

---

<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 15, 2020, 9:10pm UTC](https://pdfjs.community/t/webviewer-rotation-issue/338/3 "2020-10-15T21:10:37Z")

</div>

Hi!

In order to do this you will need to check the pages rotation and set your X and Y values based on that.

To get the rotation you can use the [getCompleteRotation](https://pdfjs.express/api/CoreControls.DocumentViewer.html#getCompleteRotation) API.

If the rotation is 90 or 270 degrees you need to swap your X and Y values.

I hope this helps!  
Thanks,  
Logan