Add Annotations to PDF

This sample shows how to set the annotations (including markup, notes, ink, free text, shapes, stamp, and so on), and delete them

// Import the JS file of ComPDFKit Web Demo.
<script src="/webviewer.global.js"></script>;

const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
.then((core) => {
  const docViewer = core.docViewer;
  docViewer.addEvent('documentloaded', () => {
    console.log('ComPDFKit Web Demo loaded');

    // Sample1: Create annotations.
    CreateAnnots(docViewer);

    // Sample2: Delete Annotations.
    DeleteAnnotations(docViewer);
  })
})

function CreateAnnots(docViewer) {
  CreateNoteAnnotation(docViewer);
  CreateLinkAnnotation(docViewer);
  CreateFreetextAnnotation(docViewer);
  CreateShapeAnnotation(docViewer);
  CreateMarkupAnnotation(docViewer);
  CreateInkAnnotation(docViewer);
  CreateStampAnnotation(docViewer);
}

// Create note annotation.
function CreateNoteAnnotation(docViewer) {
  docViewer.addAnnotations({
    type: 'text',
    pageIndex: 0,
    color: '#FF0000',
    fontSize: 16,
    fontName: 'Helvetica',
    opacity: 1,
    contents: 'test',
    rect: {
      left: 100,
      top: 30,
      right: 124,
      bottom: 54
    }
  });
}

// Create link annotation.
function CreateLinkAnnotation(docViewer) {
  // Add a hyperlink.
  docViewer.addAnnotations({
    type: 'link',
    pageIndex: 0,
    rect: {
      left: 92,
      top: 200,
      right: 167,
      bottom: 230
    },
    url: 'https://example.com'
  });

  // Add a intra-document link.
  docViewer.addAnnotations({
    type: 'link',
    pageIndex: 0,
    rect: {
      left: 92,
      top: 200,
      right: 167,
      bottom: 230
    },
    destPage: 2
  });
}

// Create freetext annotation.
function CreateFreetextAnnotation(docViewer) {
  docViewer.addAnnotations({
    type: 'freetext',
    pageIndex: 0,
    color: '#000000',
    fontSize: 16,
    fontName: 'Helvetica',
    opacity: 1,
    textAlignment: 'left',
    contents: 'test',
    rect: {
      left: 100,
      top: 200,
      right: 160,
      bottom: 240
    }
  });
}

// Create shape annotations.
function CreateShapeAnnotation(docViewer) {
  // Square.
  docViewer.addAnnotations({
    type: 'square',
    pageIndex: 0,
    rect: {
      left: 50,
      top: 50,
      right: 100,
      bottom: 100
    },
    borderWidth: 2,
    opacity: 1,
    fillTransparency: 1,
    fillColor: '',
    color: '#FF0000',
    borderColor: '#FF0000',
    borderStyle: 'solid',
    dashes: []
  });

  // Circle.
  docViewer.addAnnotations({
    type: 'circle',
    pageIndex: 0,
    rect: {
      left: 50,
      top: 50,
      right: 100,
      bottom: 100
    },
    borderWidth: 2,
    opacity: 1,
    fillTransparency: 1,
    fillColor: '',
    color: '#FF0000',
    borderColor: '#FF0000',
    borderStyle: 'solid',
    dashes: []
  });

  // Line.
  docViewer.addAnnotations({
    type: 'line',
    pageIndex: 0,
    linePoints: [50, 50, 100, 100],
    rect: {
      left: 50,
      top: 50,
      right: 100,
      bottom: 100
    },
    borderWidth: 2,
    opacity: 1,
    color: '#FF0000',
    borderColor: '#FF0000',
    borderStyle: 'solid',
    dashes: [],
  });

  // Polygon.
  docViewer.addAnnotations({
    type: 'polygon',
    pageIndex: 0,
    rect: {
      left: 114,
      top: 302,
      right: 310,
      bottom: 447
    },
    vertices: [
      { x: 156, y: 328 },
      { x: 230, y: 302 },
      { x: 300, y: 362 },
      { x: 310, y: 436 },
      { x: 180, y: 447 },
      { x: 114, y: 395 }
    ],
    borderWidth: 2,
    opacity: 1,
    fillTransparency: 1,
    fillColor: '',
    color: '#FF0000',
    borderColor: '#FF0000',
    borderStyle: 'solid',
    dashes: [],
  });

  // Multiline.
  docViewer.addAnnotations({
    type: 'polyline',
    pageIndex: 0,
    rect: {
      left: 130,
      top: 120,
      right: 263,
      bottom: 232
    },
    vertices: [
      { x: 130, y: 156 },
      { x: 202, y: 120 },
      { x: 263, y: 223 },
      { x: 157, y: 232 }
    ],
    borderWidth: 2,
    opacity: 1,
    color: '#FF0000',
    borderColor: '#FF0000',
    borderStyle: 'solid',
    dashes: [],
  });

  // Arc.
  docViewer.addAnnotations({
    type: 'ink',
    pageIndex: 0,
    arcPoints: [
      { x: 92, y: 225 },
      { x: 233, y: 169 },
      { x: 143, y: 98 }
    ],
    inkPointes: [
      [
        { PointX: 92, PointY: 225 },
        { PointX: 233, PointY: 169 },
        { PointX: 143, PointY: 98 }
      ]
    ],
    borderWidth: 2,
    opacity: 1,
    color: '#FF0000',
    borderColor: '#FF0000',
  });
}

// Create markup annotation.
function CreateMarkupAnnotation(docViewer) {
  docViewer.addAnnotations({
    type: 'highlight',  // Types include highlight, underline, strikeout, squiggly.
    pageIndex: 0,
    opacity: 0.8,
    quadPoints: [
      { PointX: 116, PointY: 300 },
      { PointX: 360, PointY: 300 },
      { PointX: 116, PointY: 360 },
      { PointX: 360, PointY: 360 },
    ],
    rect: {
      left: 116,
      top: 300,
      right: 360,
      bottom: 360
    },
    color: '#FF0000',
    contents: 'test'
  });
}

// Create ink annotation.
function CreateInkAnnotation(docViewer) {
  docViewer.addAnnotations({
    type: 'ink',
    pageIndex: 0,
    borderWidth: 2,
    opacity: 0.8,
    borderColor: '#FF0000',
    inkPointes: [[
      { PointX: 9.20, PointY: 34 },
      { PointX: 9.20, PointY: 34 },
      { PointX: 9.20, PointY: 33 },
      { PointX: 9.20, PointY: 31 },
      { PointX: 10.20, PointY: 31 },
      { PointX: 11.20, PointY: 30 },
      { PointX: 12.20, PointY: 28 },
      { PointX: 13.2, PointY: 27 },
      { PointX: 13.2, PointY: 26 },
      { PointX: 15.2, PointY: 24 },
      { PointX: 17.2, PointY: 23 },
      { PointX: 22.2, PointY: 19 }
    ]],
    rect: {
      left: 9.2,
      top: 19,
      right: 22.2,
      bottom: 34
    }
  });
}

// Create stamp annotation.
function CreateStampAnnotation(docViewer) {
  // Standard stamp.
  docViewer.addAnnotations({
    type: 'stamp',
    pageIndex: 0,
    rect: {
      left: 205,
      top: 379,
      right: 435,
      bottom: 431
    },
    stampType: 'standard',
    contents: 'NotApproved'
  });

  // Text stamp.
  docViewer.addAnnotations({
    type: 'stamp',
    pageIndex: 0,
    rect: {
      left: 220,
      top: 367,
      right: 320,
      bottom: 412
    },
    stampType: 'text',
    contents: 'REVISED',
    time: '28/07/2023 07:28:28',
    stampColor: 1,
    stampShape: 0
  });
}

// Delete all annotations.
async function DeleteAnnotations(docViewer) {
  docViewer.deleteAnnotations();
}