Ink Annotation in ASP.NET Core PDF Viewer

14 Aug 20265 minutes to read

Ink annotations allow users to draw freehand strokes using mouse, pen, or touch input to mark content naturally.

Ink overview

Enable Freehand Drawing (Ink)

In the ASP.NET Core PDF Viewer, annotation modules such as Ink are enabled by default.

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib">
    </ejs-pdfviewer>
</div>

Add Ink annotation

Draw Freehand Using the Toolbar

  1. Open the Annotation Toolbar.
  2. Click Draw Ink.
  3. Draw freehand on the page.

Ink tool

Enable Ink Mode

Switch the viewer into an ink annotation mode programmatically.

<script>
function enableInkMode() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.annotation.setAnnotationMode('Ink');
}
</script>

Exit Ink Mode

<script>
function exitInkMode() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.annotation.setAnnotationMode('None');
}
</script>

Add Ink Programmatically

Use the addAnnotation API to create an ink stroke by providing a path (an array of move/line commands), bounds, and target page.

<script>
function addInkProgrammatically() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.annotation.addAnnotation('Ink', {
    offset: { x: 150, y: 100 },
        pageNumber: 1,
        width: 200,
        height: 60,
        path: '[{"command":"M","x":244.83,"y":982.00},{"command":"L","x":250.83,"y":953.33}]'
  });
}
</script>

Customize Ink Appearance

You can customize stroke color, thickness, and opacity using the inkAnnotationSettings property.

<div style="width:100%;height:650px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:650px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib">
    </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.inkAnnotationSettings = { author: 'Guest', strokeColor: '#0066ff', thickness: 3, opacity: 0.85 };
}
</script>

Erase, Modify, or Delete Ink Strokes

  • Move: Drag the annotation.
  • Resize: Use selector handles.
  • Change appearance: Use Edit Stroke Color, Thickness, and Opacity tools.
  • Delete: Via toolbar or context menu.
  • Customize context menu: See Customize Context Menu.

Edit ink annotation in UI

Stroke color, thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.

  • Edit the stroke color using the color palette in the Edit Stroke Color tool.

Change ink stroke color

  • Edit thickness using the range slider in the Edit Thickness tool.

Change ink thickness

  • Edit opacity using the range slider in the Edit Opacity tool.

Change ink opacity

Edit Ink Programmatically

Modify an existing ink programmatically using editAnnotation().

<script>
function editInkProgrammatically() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  for (var i = 0; i < viewer.annotationCollection.length; i++) {
    var ann = viewer.annotationCollection[i];
    if (ann.shapeAnnotationType === 'Ink') {
      var width = ann.bounds.width, height = ann.bounds.height;
      ann.bounds = { x: 120, y: 120, width: width, height: height };
      ann.strokeColor = '#ff0000';
      ann.thickness = 4;
      viewer.annotation.editAnnotation(ann);
      break;
    }
  }
}
</script>

Delete Ink

Delete Ink via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see Delete Annotation.

Ink Annotation Events

The PDF viewer provides annotation life‑cycle events that notify when Ink annotations are added, modified, selected, or removed.
For the full list of available events and their descriptions, see Annotation Events

Export and Import

Ink annotations can be exported or imported along with other annotations.
See Export and Import annotations.

See Also