Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Measurement

play_arrow

PDF.js Express REST API

play_arrow

Create custom annotation styles

An annotation's default style is often governed by a tool associated with it. For example, a tool will set stroke color, stroke thickness, fill color, text color, font size and opacity of the annotation, which becomes their 'default' style. To change these properties, you can use the setStyles function on the tool objects.

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

    docViewer.getTool('AnnotationCreateTextHighlight').setStyles(currentStyle => ({
      StrokeColor: new Annotations.Color(0, 221, 255)
    }));

    docViewer.getTool('AnnotationCreateFreeText').setStyles(currentStyle => ({
      StrokeThickness: 5,
      StrokeColor: new Annotations.Color(0, 0, 255),
      TextColor: new Annotations.Color(0, 0, 0),
      FontSize: '20pt'
    }));
  });