Section:

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.

1WebViewer({ ... }, viewerElement)
2  .then(instance => {
3    const { documentViewer, Annotations } = instance.Core;
4
5    documentViewer.getTool('AnnotationCreateTextHighlight').setStyles({
6      StrokeColor: new Annotations.Color(0, 221, 255)
7    });
8
9    documentViewer.getTool('AnnotationCreateFreeText').setStyles({
10      StrokeThickness: 5,
11      StrokeColor: new Annotations.Color(0, 0, 255),
12      TextColor: new Annotations.Color(0, 0, 0),
13      FontSize: '20pt'
14    });
15  });

Related Links

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 (v8.0+)

1WebViewer({ ... }, viewerElement)
2  .then(instance => {
3    const { documentViewer, Annotations } = instance.Core;
4
5    const highlightCreateTool = documentViewer.getTool('AnnotationCreateTextHighlight');
6
7    highlightCreateTool.defaults.StrokeColor = new Annotations.Color(0, 221, 255);
8
9    console.log(highlightCreateTool.defaults.StrokeColor);
10  });

JavaScript (v6.0+)

1WebViewer({ ... }, viewerElement)
2  .then(instance => {
3    const { docViewer, Annotations } = instance;
4
5    const highlightCreateTool = docViewer.getTool('AnnotationCreateTextHighlight');
6
7    highlightCreateTool.defaults.StrokeColor = new Annotations.Color(0, 221, 255);
8
9    console.log(highlightCreateTool.defaults.StrokeColor);
10  });

Next steps

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales