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.

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

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

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

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

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.

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

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

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