Syncfusion AI Assistant

How can I help you?

Annotations API in ASP.NET Core

27 Apr 202624 minutes to read

The PDF Viewer provides APIs to read the loaded annotations and to configure global defaults for creating/editing annotations.

API Description
annotationCollection Gets the loaded document annotation collection.
annotationDrawingOptions Options to configure line-type annotation drawing behavior.
annotationSelectorSettings Configures the annotation selector (selection UI).
annotationSettings Global defaults for all annotations.
areaSettings Defaults for Area annotations.
arrowSettings Defaults for Arrow annotations.
circleSettings Defaults for Circle annotations.
customStamp Defines custom stamp items.
customStampSettings Defaults for Custom Stamp annotations.
distanceSettings Defaults for Distance annotations.

annotationCollection

Read the loaded document annotation collection from the viewer instance.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    // Example: read annotation collection
    console.log(viewer.annotationCollection);
  }
};
</script>

annotationDrawingOptions

Configure line-type annotation drawing behavior.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    // Example: configure line annotation drawing
    viewer.annotationDrawingOptions = { enableLineAngleConstraints: true, restrictLineAngleTo: 90 };
  }
};
</script>

annotationSelectorSettings

Configure the annotation selector (selection UI).

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.annotationSelectorSettings = {
      selectionBorderColor: 'blue',
      resizerBorderColor: 'red',
      resizerFillColor: '#4070ff',
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: 'Circle',
      selectorLineDashArray: [5, 6],
      resizerLocation: ['Corners','Edges'],
      resizerCursorType: 'grab'
    };
  }
};
</script>

annotationSettings

Global defaults for all annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.annotationSettings = {
      author: 'XYZ',
      minHeight: 10,
      minWidth: 10,
      maxWidth: 100,
      maxHeight: 100,
      isLock: false,
      skipPrint: false,
      skipDownload: false,
      allowedInteractions: ['Resize']
    };
  }
};
</script>

areaSettings

Defaults for Area annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.areaSettings = {
      opacity: 1,
      fillColor: '#ffffff00',
      strokeColor: '#ff0000',
      author: 'XYZ',
      thickness: 1,
      minHeight: 10,
      minWidth: 10,
      maxWidth: 100,
      maxHeight: 100,
      isLock: false,
      annotationSelectorSettings: {
        selectionBorderColor: 'blue',
        resizerBorderColor: 'white',
        resizerFillColor: '#4070ff',
        resizerSize: 8,
        selectionBorderThickness: 1,
        resizerShape: 'Circle',
        selectorLineDashArray: [5, 6],
        resizerLocation: ['Corners','Edges'],
        resizerCursorType: 'grab'
      },
      allowedInteractions: ['Resize'],
      isPrint: true
    };
  }
};
</script>

arrowSettings

Defaults for Arrow annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.arrowSettings = {
      opacity: 1,
      fillColor: '#9c2592',
      strokeColor: '#ff0000',
      author: 'XYZ',
      thickness: 1,
      borderDashArray: 1,
      lineHeadStartStyle: 'Closed',
      lineHeadEndStyle: 'Closed',
      annotationSelectorSettings: {
        selectionBorderColor: 'blue',
        resizerBorderColor: 'black',
        resizerFillColor: '#FF4081',
        resizerSize: 8,
        selectionBorderThickness: 1,
        resizerShape: 'Square',
        selectorLineDashArray: [5, 6],
        resizerLocation: ['Corners','Edges'],
        resizerCursorType: 'grab'
      },
      minHeight: 10,
      minWidth: 10,
      maxWidth: 100,
      maxHeight: 0,
      isLock: false,
      allowedInteractions: ['Resize'],
      isPrint: true
    };
  }
};
</script>

circleSettings

Defaults for Circle annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.circleSettings = {
      opacity: 1,
      fillColor: '#9c2592',
      strokeColor: '#ff0000',
      author: 'XYZ',
      thickness: 1,
      annotationSelectorSettings: {
        selectionBorderColor: 'blue',
        resizerBorderColor: 'black',
        resizerFillColor: '#FF4081',
        resizerSize: 8,
        selectionBorderThickness: 1,
        resizerShape: 'Square',
        selectorLineDashArray: [5, 6],
        resizerLocation: ['Corners','Edges'],
        resizerCursorType: 'grab'
      },
      minHeight: 10,
      minWidth: 10,
      maxWidth: 100,
      maxHeight: 100,
      isLock: false,
      allowedInteractions: ['Resize'],
      isPrint: true
    };
  }
};
</script>

customStamp

Define custom stamp items.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.customStamp = [
      { customStampName: 'Sample', customStampImageSource: 'data:image/png;base64,Syncfusionpdfviewer' }
    ];
  }
};
</script>

customStampSettings

Defaults for Custom Stamp annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.customStampSettings = {
      opacity: 1, author: 'XYZ', width: 100, height: 100, left: 200, top: 200,
      minHeight: 10, minWidth: 10, maxWidth: 100, maxHeight: 100, isLock: false,
      enableCustomStamp: true, allowedInteractions: ['None'], isPrint: true
    };
  }
};
</script>

distanceSettings

Defaults for Distance annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.distanceSettings = {
      opacity: 1, fillColor: '#ffffff00', strokeColor: '#ff0000', author: 'Guest', thickness: 1,
      borderDashArray: 1, lineHeadStartStyle: 'Closed', lineHeadEndStyle: 'Closed',
      annotationSelectorSettings: {
        selectionBorderColor: 'blue', resizerBorderColor: 'black', resizerFillColor: '#FF4081',
        resizerSize: 8, selectionBorderThickness: 1, resizerShape: 'Square',
        selectorLineDashArray: [5, 6],
        resizerLocation: ['Corners','Edges'],
        resizerCursorType: 'grab'
      },
      minHeight: 10, minWidth: 10, maxWidth: 100, maxHeight: 100, isLock: false,
      leaderLength: 40, resizeCursorType: 'move',
      allowedInteractions: ['Resize'], isPrint: true
    };
  }
};
</script>

enableAnnotation

Enable or disable the Add/Edit Annotations tool in the toolbar.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.enableAnnotation = false;
  }
};
</script>

enableAnnotationToolbar

Show or hide the annotation toolbar when the document loads.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.enableAnnotationToolbar = false;
  }
};
</script>

enableFreeText

Enable or disable Free Text annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.enableFreeText = false;
  }
};
</script>

enableHandwrittenSignature

Enable or disable the handwritten signature feature.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.enableHandwrittenSignature = false;
  }
};
</script>

enableInkAnnotation

Enable or disable Ink annotations (true by default).

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.enableInkAnnotation = false;
  }
};
</script>

enableMeasureAnnotation

Enable or disable calibrate/measurement annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.enableMeasureAnnotation = false;
  }
};
</script>

enableMultiPageAnnotation

Enable or disable multi-page text markup selection in UI.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/FormDesigner.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.enableMultiPageAnnotation = true;
  }
};
</script>

enableShapeAnnotation

Enable or disable shape annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.enableShapeAnnotation = false;
  }
};
</script>

enableShapeLabel

Enable or disable labels for shape annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.enableShapeLabel = true;
  }
};
</script>

enableStampAnnotations

Enable or disable stamp annotations at load time.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.enableStampAnnotations = false;
  }
};
</script>

enableStickyNotesAnnotation

Enable or disable sticky notes annotations at load time.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.enableStickyNotesAnnotation = false;
  }
};
</script>

enableTextMarkupAnnotation

Enable or disable text markup annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.enableTextMarkupAnnotation = false;
  }
};
</script>

enableTextMarkupResizer

Enable or disable the text markup resizer to modify bounds in the UI.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/FormDesigner.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.enableTextMarkupResizer = true;
  }
};
</script>

exportAnnotationFileName

Gets or sets the exported annotations JSON file name.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.exportAnnotationFileName = "Annotation export file_1";
  }
};
</script>

freeTextSettings

Defaults for Free Text annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.freeTextSettings = {
      opacity: 1, fillColor: '#ffffff00', borderColor: '#4070ff', author: 'XYZ',
      borderWidth: 1, width: 151, fontSize: 16, height: 24.6, fontColor: '#000',
      fontFamily: 'Helvetica', defaultText: 'Type Here', textAlignment: 'Right',
      fontStyle: 'Italic', allowTextOnly: false,
      annotationSelectorSettings: {
        selectionBorderColor: 'blue', resizerBorderColor: 'black', resizerFillColor: '#FF4081',
        resizerSize: 8, selectionBorderThickness: 1, resizerShape: 'Circle',
        selectorLineDashArray: [], resizerLocation: ['Corners','Edges'],
        resizerCursorType: null
      },
      minHeight: 10, minWidth: 10, maxWidth: 100, maxHeight: 100, isLock: false,
      allowedInteractions: ['None'], isPrint: true,
      isReadonly: false, enableAutoFit: false
    };
  }
};
</script>

handWrittenSignatureSettings

Defaults for handwritten signatures.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.handWrittenSignatureSettings = {
      signatureItem: ['Signature','Initial'],
      saveSignatureLimit: 1,
      saveInitialLimit: 1,
      opacity: 1,
      strokeColor: '#000000',
      width: 150,
      height: 100,
      thickness: 1,
      annotationSelectorSettings: {
        selectionBorderColor: 'blue', resizerBorderColor: 'black', resizerFillColor: '#FF4081',
        resizerSize: 8, selectionBorderThickness: 1, resizerShape: 'Circle',
        selectorLineDashArray: [5,6], resizerLocation: ['Corners','Edges'], resizerCursorType: 'grab'
      },
      allowedInteractions: ['Resize'],
      signatureDialogSettings: { displayMode: ['Draw','Text','Upload'], hideSaveSignature: false },
      initialDialogSettings: { displayMode: ['Draw','Text','Upload'], hideSaveSignature: false }
    };
  }
};
</script>

highlightSettings

Defaults for Highlight annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.highlightSettings = {
      opacity: 1, color: '#DAFF56', author: 'XYZ',
      annotationSelectorSettings: {
        selectionBorderColor: 'blue', resizerBorderColor: 'black', resizerFillColor: '#FF4081',
        resizerSize: 8, selectionBorderThickness: 1, resizerShape: 'Square',
        selectorLineDashArray: [5,6], resizerLocation: ['Corners','Edges']
      },
      isLock: false, enableMultiPageAnnotation: false, enableTextMarkupResizer: false,
      allowedInteractions: ['Resize'], isPrint: true
    };
  }
};
</script>

inkAnnotationSettings

Defaults for Ink annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.inkAnnotationSettings = {
      author: 'XYZ', opacity: 1, strokeColor: '#ff0000', thickness: 1,
      annotationSelectorSettings: {
        selectionBorderColor: 'blue', resizerBorderColor: 'black', resizerFillColor: '#FF4081',
        resizerSize: 8, selectionBorderThickness: 1, resizerShape: 'Circle',
        selectorLineDashArray: [5,6], resizerLocation: ['Corners','Edges'], resizerCursorType: 'grab'
      },
      isLock: false, allowedInteractions: ['Resize'], isPrint: true
    };
  }
};
</script>

isAnnotationToolbarVisible

Open the annotation toolbar initially and read its visibility state.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/FormDesigner.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.isAnnotationToolbarVisible = true;
    console.log('Annotation toolbar visible:', viewer.isAnnotationToolbarVisible);
  }
};
</script>

lineSettings

Defaults for Line annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.lineSettings = {
      opacity: 1, color: '#9c2592', fillColor: '#ffffff00', strokeColor: '#ff0000',
      author: 'XYZ', thickness: 1, borderDashArray: 1,
      lineHeadStartStyle: 'None', lineHeadEndStyle: 'None',
      annotationSelectorSettings: {
        selectionBorderColor: 'blue', resizerBorderColor: 'black', resizerFillColor: '#FF4081',
        resizerSize: 8, selectionBorderThickness: 1, resizerShape: 'Square',
        selectorLineDashArray: [5,6], resizerLocation: ['Corners','Edges'], resizerCursorType: null
      },
      minHeight: 10, minWidth: 10, maxWidth: 100, maxHeight: 100, isLock: false,
      allowedInteractions: ['Resize'], isPrint: true
    };
  }
};
</script>

measurementSettings

Defaults for Measurement annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.measurementSettings = { conversionUnit: 'cm', displayUnit: 'cm', scaleRatio: 1, depth: 96 };
  }
};
</script>

perimeterSettings

Defaults for Perimeter annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.perimeterSettings = {
      opacity: 1, fillColor: '#ffffff00', strokeColor: '#ff0000', author: 'XYZ',
      thickness: 1, borderDashArray: 1, lineHeadStartStyle: 'Open', lineHeadEndStyle: 'Open',
      minHeight: 10, minWidth: 10, maxWidth: 100, maxHeight: 100, isLock: false,
      annotationSelectorSettings: {
        selectionBorderColor: 'blue', resizerBorderColor: 'black', resizerFillColor: '#4070ff',
        resizerSize: 8, selectionBorderThickness: 1, resizerShape: 'Circle',
        selectorLineDashArray: [5,6], resizerLocation: ['Corners','Edges'], resizerCursorType: 'grab'
      },
      allowedInteractions: ['Resize'], isPrint: true
    };
  }
};
</script>

polygonSettings

Defaults for Polygon annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.polygonSettings = {
      opacity: 1, fillColor: '#ffffff00', strokeColor: '#ff0000', author: 'XYZ', thickness: 1,
      annotationSelectorSettings: {
        selectionBorderColor: 'blue', resizerBorderColor: 'black', resizerFillColor: '#FF4081',
        resizerSize: 8, selectionBorderThickness: 1, resizerShape: 'Square',
        selectorLineDashArray: [5,6], resizerLocation: ['Corners','Edges'], resizerCursorType: 'grab'
      },
      minHeight: 10, minWidth: 10, maxWidth: 100, maxHeight: 100, isLock: false,
      allowedInteractions: ['Resize'], isPrint: true
    };
  }
};
</script>

radiusSettings

Defaults for Radius annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.radiusSettings = {
      opacity: 1, fillColor: '#ffffff00', strokeColor: '#ff0000', author: 'XYZ', thickness: 1,
      annotationSelectorSettings: {
        selectionBorderColor: 'blue', resizerBorderColor: 'red', resizerFillColor: '#4070ff',
        resizerSize: 8, selectionBorderThickness: 1, resizerShape: 'Circle',
        selectorLineDashArray: [5,6], resizerLocation: ['Corners','Edges'], resizerCursorType: 'grab'
      },
      minHeight: 10, minWidth: 10, maxWidth: 100, maxHeight: 100, isLock: false,
      allowedInteractions: ['Resize'], isPrint: true
    };
  }
};
</script>

rectangleSettings

Defaults for Rectangle annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.rectangleSettings = {
      opacity: 1, fillColor: '#9c2592', strokeColor: '#ff0000', author: 'XYZ', thickness: 1,
      annotationSelectorSettings: {
        selectionBorderColor: 'blue', resizerBorderColor: 'black', resizerFillColor: '#FF4081',
        resizerSize: 8, selectionBorderThickness: 1, resizerShape: 'Square',
        selectorLineDashArray: [5,6], resizerLocation: ['Corners','Edges'], resizerCursorType: 'grab'
      },
      minHeight: 10, minWidth: 10, maxWidth: 100, maxHeight: 100, isLock: false,
      allowedInteractions: ['Resize'], isPrint: true
    };
  }
};
</script>

shapeLabelSettings

Defaults for shape labels (requires enableShapeLabel).

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" enableShapeLabel="true" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.shapeLabelSettings = {
      opacity: 1, fillColor: '#9c2592', borderColor: '#ff0000', fontColor: '#000',
      fontSize: 16, labelHeight: 24.6, labelMaxWidth: 151, labelContent: 'XYZ'
    };
  }
};
</script>

stampSettings

Defaults for Stamp annotations (dynamic/sign/business).

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.stampSettings = {
      opacity: 1, author: 'XYZ',
      annotationSelectorSettings: {
        selectionBorderColor: 'blue', resizerBorderColor: 'red', resizerFillColor: '#FF4081',
        resizerSize: 8, selectionBorderThickness: 5, resizerShape: 'Circle',
        selectorLineDashArray: [5,6], resizerLocation: ['Corners','Edges'], resizerCursorType: 'grab'
      },
      minHeight: 10, minWidth: 10, maxWidth: 100, maxHeight: 100, isLock: false,
      dynamicStamps: ['Revised','Reviewed','Received','Confidential','Approved','NotApproved'],
      signStamps: ['Witness','InitialHere','SignHere','Accepted','Rejected'],
      standardBusinessStamps: ['Approved','NotApproved','Draft','Final','Completed','Confidential','ForPublicRelease','NotForPublicRelease','ForComment','Void','PreliminaryResults','InformationOnly'],
      allowedInteractions: ['Resize'], isPrint: true
    };
  }
};
</script>

stickyNotesSettings

Defaults for Sticky Notes annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.stickyNotesSettings = {
      author: 'XYZ', opacity: 1,
      annotationSelectorSettings: {
        selectionBorderColor: 'blue', resizerBorderColor: 'red', resizerFillColor: '#4070ff',
        resizerSize: 8, selectionBorderThickness: 1, resizerShape: 'Circle',
        selectorLineDashArray: [5,6], resizerLocation: ['Corners','Edges'], resizerCursorType: 'grab'
      },
      isLock: false, allowedInteractions: ['Resize'], isPrint: true
    };
  }
};
</script>

strikethroughSettings

Defaults for Strikethrough annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.strikethroughSettings = {
      opacity: 1, color: '#DAFF56', author: 'XYZ',
      annotationSelectorSettings: {
        selectionBorderColor: 'blue', resizerBorderColor: 'black', resizerFillColor: '#FF4081',
        resizerSize: 8, selectionBorderThickness: 1, resizerShape: 'Square',
        selectorLineDashArray: [5,6], resizerLocation: ['Corners','Edges']
      },
      isLock: false, enableMultiPageAnnotation: false, enableTextMarkupResizer: false,
      allowedInteractions: ['Resize'], isPrint: true
    };
  }
};
</script>

underlineSettings

Defaults for Underline annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.underlineSettings = {
      opacity: 1, color: '#9c2592', author: 'XYZ',
      annotationSelectorSettings: {
        selectionBorderColor: 'blue', resizerBorderColor: 'black', resizerFillColor: '#FF4081',
        resizerSize: 8, selectionBorderThickness: 1, resizerShape: 'Square',
        selectorLineDashArray: [5,6], resizerLocation: ['Corners','Edges']
      },
      isLock: false, enableMultiPageAnnotation: false, enableTextMarkupResizer: false,
      allowedInteractions: ['Resize'], isPrint: true
    };
  }
};
</script>

volumeSettings

Defaults for Volume annotations.

<div style="width:100%;height:650px">
  <ejs-pdfviewer id="container" style="height:650px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/PDF_Succinctly.pdf">
  </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    viewer.volumeSettings = {
      opacity: 1, fillColor: '#ffffff00', strokeColor: '#ff0000', author: 'XYZ', thickness: 1,
      minHeight: 10, minWidth: 10, maxWidth: 100, maxHeight: 100, isLock: false,
      annotationSelectorSettings: {
        selectionBorderColor: 'blue', resizerBorderColor: 'black', resizerFillColor: '#4070ff',
        resizerSize: 8, selectionBorderThickness: 1, resizerShape: 'Circle',
        selectorLineDashArray: [5,6], resizerLocation: ['Corners','Edges'], resizerCursorType: 'grab'
      },
      allowedInteractions: ['Resize'], isPrint: true
    };
  }
};
</script>

See also