Section:

Create rectangle annotation using JavaScript

Here is an example of creating a rectangle annotation using JavaScript, but creating other types of annotations are similar.

1WebViewer(...)
2  .then(instance => {
3    const { Annotations, annotationManager, documentViewer } = instance.Core;
4
5    documentViewer.addEventListener('documentLoaded', () => {
6      const rectangleAnnot = new Annotations.RectangleAnnotation();
7      rectangleAnnot.PageNumber = 1;
8      // values are in page coordinates with (0, 0) in the top left
9      rectangleAnnot.X = 100;
10      rectangleAnnot.Y = 150;
11      rectangleAnnot.Width = 200;
12      rectangleAnnot.Height = 50;
13      rectangleAnnot.Author = annotationManager.getCurrentUser();
14
15      annotationManager.addAnnotation(rectangleAnnot);
16      // need to draw the annotation otherwise it won't show up until the page is refreshed
17      annotationManager.redrawAnnotation(rectangleAnnot);
18    })
19  })

Related Links

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales