ComPDF
Contact SalesGet Free Trial
PDF SDKConversion SDKIDP
PDF SDK
DemoDownloadFAQTechnical Support

Create Annotations ​

ComPDFKit for Web includes a wide variety of standard annotations, and each of them is added to the project in a similar way. Before creating annotations, you need to initialize a pdf document in your project.

Note: When adding an annotation, the coordinate origin is at the left top corner of the page.

javascript
// Import the JS file of ComPDFKit Demo.
import ComPDFKitViewer from "/@compdfkit/webviewer";

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');
    })
  });

Text ​

Add a sticky note (text annotation) to a PDF Document page by using the following method.

javascript
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
  }
});

To add a hyperlink or intra-document link annotation to a PDF Document page by using the following method.

javascript
// 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
});

Free Text ​

Add a free text annotation to a PDF Document page by using the following method.

javascript
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
  }
});

Graphics ​

Add a shape annotation like a rectangle, circle, line, or arrow to a PDF document page by using the following method.

javascript
// 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',
});

Markup ​

Add a highlight annotation to a PDF Document page by using the following method, and add other markup annotations in a similar way.

Note: The value of quadPoints are (left,top), (right,top), (left,bottom), and (right,bottom). The coordinate origin is at the bottom left corner of the page.

javascript
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'
});

Ink ​

Ink is the annotation to draw freely on PDFs with kinds of colors. Follow the method below to obtain our ink annotation.

javascript
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
  }
});

Stamp ​

Add standard and text stamps to a PDF document page by using the following method. Provide more than 20 standard stamps and dynamic time stamps.

javascript
// 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
});

// Create an image stamp.
const res = await fetch('https://example.com/image.png');
const imageBlob = await res.blob();
const reader = new FileReader();

reader.onloadend = () => {
  const imageBase64 = reader.result;
  
  docViewer.addAnnotations({
    type: 'stamp',
    stampType: 'image',
    pageIndex: 0,
    imageBase64,
    rect: {
      left: 220,
      top: 367,
      right: 320,
      bottom: 412
    }
  });
};

reader.readAsDataURL(imageBlob);