Some test text!

Loading...
Guides

Create text highlighting annotations using JavaScript

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

WebViewer(...)
  .then(instance => {
    const { Annotations, annotationManager, documentViewer } = instance.Core;

    documentViewer.addEventListener('documentLoaded', () => {
      const highlight = new Annotations.TextHighlightAnnotation();
      highlight.PageNumber = 4;
      highlight.X = 405;
      highlight.Y = 165;
      highlight.Width = 275;
      highlight.Height = 25;
      highlight.StrokeColor = new Annotations.Color(255, 255, 0);
      // you might get the quads from text selection, a server calculation, etc
      highlight.Quads = [
        { x1: 644, y1: 178, x2: 682, y2: 178, x3: 682, y3: 168, x4: 644, y4: 168 },
        { x1: 408, y1: 190, x2: 458, y2: 190, x3: 458, y3: 180, x4: 408, y4: 180 }
      ];

      annotationManager.addAnnotation(highlight);
      annotationManager.drawAnnotations(highlight.PageNumber);
    })
  })

Get the answers you need: Support

UPCOMING WEBINAR: Live tech update and run-through. October 21 @ 11am PDT