Customizing default annotation styles

An annotation's default style is the style it is created with when created through its associated tool. For example, a freetext annotation create tool may set the stroke color, stroke thickness, fill color, text color, font size and/or opacity of the annotation shortly after creation, which becomes their 'default' or initial style.

Changing the default annotation style

To change the default style, you can use the setStyles API on the tool objects.

JavaScript (SDK v8.0+)

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

    documentViewer.getTool('AnnotationCreateTextHighlight').setStyles({
      StrokeColor: new Annotations.Color(0, 221, 255)
    });

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

WebViewerInstance Core DocumentViewer.getTool Annotations

JavaScript (SDK v6.0+)

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'
    }));
  });

WebViewerInstance DocumentViewer.getTool Annotations

Using the defaults object

On the annotation create tools, you will find a defaults object that contains the values used to initialize the annotation style properties. If you need to read the initial values, you can use this object.

JavaScript

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

    const highlightCreateTool = documentViewer.getTool('AnnotationCreateTextHighlight');

    highlightCreateTool.defaults.StrokeColor = new Annotations.Color(0, 221, 255);

    console.log(highlightCreateTool.defaults.StrokeColor);
  });

JavaScript

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

    const highlightCreateTool = docViewer.getTool('AnnotationCreateTextHighlight');

    highlightCreateTool.defaults.StrokeColor = new Annotations.Color(0, 221, 255);

    console.log(highlightCreateTool.defaults.StrokeColor);
  });

Next steps

If you want to check out which properties are available on the annotations themselves, check out the annotation type guides.