Some test text!

menu

Create rectangle annotation using JavaScript

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

WebViewer(...)
  .then(instance => {
    const { Annotations, annotManager, docViewer } = instance;

    docViewer.on('documentLoaded', () => {
      const rectangleAnnot = new Annotations.RectangleAnnotation();
      rectangleAnnot.PageNumber = 1;
      // values are in page coordinates with (0, 0) in the top left
      rectangleAnnot.X = 100;
      rectangleAnnot.Y = 150;
      rectangleAnnot.Width = 200;
      rectangleAnnot.Height = 50;
      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);
    })
  })

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.