chevron_right
close
chevron_right

Get Started

chevron_right

Learn more

chevron_right

Open a document

chevron_right

Viewer

chevron_right

UI Customization

chevron_right

Annotations

chevron_right

Collaboration

chevron_right

Forms

chevron_right

Signature

chevron_right

Measurement

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(function(instance) {
    var docViewer = instance.docViewer;
    var Annotations = instance.Annotations;

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

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