Create Annotations

ComPDF 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.

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

const viewer = document.getElementById('webviewer');
ComPDFKitViewer({
  path: '/',
  initialDoc: 'Your PDF Url',
  licenseKey: 'Input your license here'
}, viewer)
  .then((instance) => {
    const { documentViewer, annotationManager, Annotations, Actions } = instance.Core;
    documentViewer.addEventListener('documentLoaded', () => {
      console.log('ComPDFKit Web Demo loaded');
    })
  });

Each annotation is an instance of a class in Annotations. Set its page with PageNumber (starting from 1) and its rectangle with X, Y, Width and Height, then add it with annotationManager.addAnnotation().

Text

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

const text = new Annotations.StickyAnnotation({
  PageNumber: 1,
  X: 100,
  Y: 30,
  Width: 24,
  Height: 24,
  StrokeColor: new Annotations.Color(255, 0, 0),
  Opacity: 1
});
text.setContents('test');
annotationManager.addAnnotation(text);

Link

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

// Add a hyperlink.
const link = new Annotations.Link({
  PageNumber: 1,
  X: 92,
  Y: 200,
  Width: 75,
  Height: 30
});
link.addAction('U', new Actions.URI({ uri: 'https://example.com' }));
annotationManager.addAnnotation(link);

// Add a intra-document link.
const pageLink = new Annotations.Link({
  PageNumber: 1,
  X: 92,
  Y: 200,
  Width: 75,
  Height: 30
});
pageLink.addAction('U', new Actions.GoTo({ dest: { page: 2 } }));
annotationManager.addAnnotation(pageLink);

Free Text

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

const freeText = new Annotations.FreeTextAnnotation({
  PageNumber: 1,
  X: 100,
  Y: 200,
  Width: 60,
  Height: 40,
  TextColor: new Annotations.Color(0, 0, 0),
  FontSize: '16pt',
  Font: 'Helvetica',
  Opacity: 1,
  TextAlign: 'left'
});
freeText.setContents('test');
annotationManager.addAnnotation(freeText);

Graphics

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

const red = new Annotations.Color(255, 0, 0);
// Square.
const square = new Annotations.RectangleAnnotation({
  PageNumber: 1,
  X: 50,
  Y: 50,
  Width: 50,
  Height: 50,
  StrokeThickness: 2,
  Opacity: 1,
  FillColor: null, // No fill.
  StrokeColor: red,
  Style: 'solid'
});
annotationManager.addAnnotation(square);

// Circle.
const circle = new Annotations.EllipseAnnotation({
  PageNumber: 1,
  X: 50,
  Y: 50,
  Width: 50,
  Height: 50,
  StrokeThickness: 2,
  Opacity: 1,
  FillColor: null, // No fill.
  StrokeColor: red,
  Style: 'solid'
});
annotationManager.addAnnotation(circle);

// Line.
const line = new Annotations.LineAnnotation({
  PageNumber: 1,
  StrokeThickness: 2,
  Opacity: 1,
  StrokeColor: red,
  Style: 'solid'
});
line.setStartPoint(50, 50);
line.setEndPoint(100, 100);
annotationManager.addAnnotation(line);

// Polygon.
const polygon = new Annotations.PolygonAnnotation({
  PageNumber: 1,
  StrokeThickness: 2,
  Opacity: 1,
  FillColor: null, // No fill.
  StrokeColor: red,
  Style: 'solid'
});
polygon.setPath([
  new Annotations.Point(156, 328),
  new Annotations.Point(230, 302),
  new Annotations.Point(300, 362),
  new Annotations.Point(310, 436),
  new Annotations.Point(180, 447),
  new Annotations.Point(114, 395)
]);
annotationManager.addAnnotation(polygon);

// Multiline.
const polyline = new Annotations.PolylineAnnotation({
  PageNumber: 1,
  StrokeThickness: 2,
  Opacity: 1,
  StrokeColor: red,
  Style: 'solid'
});
polyline.setPath([
  new Annotations.Point(130, 156),
  new Annotations.Point(202, 120),
  new Annotations.Point(263, 223),
  new Annotations.Point(157, 232)
]);
annotationManager.addAnnotation(polyline);

// Arc.
const arc = new Annotations.ArcAnnotation({
  PageNumber: 1,
  StrokeThickness: 2,
  Opacity: 1,
  StrokeColor: red
});
arc.setPath([
  new Annotations.Point(92, 225),
  new Annotations.Point(233, 169),
  new Annotations.Point(143, 98)
]);
annotationManager.addAnnotation(arc);

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: Each Quad lists its points in the order (left,bottom), (right,bottom), (right,top), and (left,top). The coordinate origin is at the left top corner of the page.

// Classes include TextHighlightAnnotation, TextUnderlineAnnotation, TextStrikeoutAnnotation, TextSquigglyAnnotation.
const highlight = new Annotations.TextHighlightAnnotation({
  PageNumber: 1,
  Opacity: 0.8,
  StrokeColor: new Annotations.Color(255, 0, 0)
});
highlight.setQuads([
  new Annotations.Quad(116, 360, 360, 360, 360, 300, 116, 300)
]);
highlight.setContents('test');
annotationManager.addAnnotation(highlight);

The wave of squiggly annotations is drawn with the static properties Annotations.TextSquigglyAnnotation.waveLength (default 10) and waveAmplitude (default 2), in page units. They apply to every squiggly annotation shown in the viewer, not to the appearance saved to the file. Redraw the annotations after changing them, for example with annotationManager.drawAnnotationsFromList(annotations).

Ink

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

const ink = new Annotations.FreeHandAnnotation({
  PageNumber: 1,
  StrokeThickness: 2,
  Opacity: 0.8,
  StrokeColor: new Annotations.Color(255, 0, 0)
});
ink.setPath([
  new Annotations.Point(9.20, 34),
  new Annotations.Point(9.20, 34),
  new Annotations.Point(9.20, 33),
  new Annotations.Point(9.20, 31),
  new Annotations.Point(10.20, 31),
  new Annotations.Point(11.20, 30),
  new Annotations.Point(12.20, 28),
  new Annotations.Point(13.2, 27),
  new Annotations.Point(13.2, 26),
  new Annotations.Point(15.2, 24),
  new Annotations.Point(17.2, 23),
  new Annotations.Point(22.2, 19)
]);
annotationManager.addAnnotation(ink);

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.

// Standard stamp.
const standardStamp = new Annotations.StampAnnotation({
  PageNumber: 1,
  X: 205,
  Y: 379,
  Width: 230,
  Height: 52
});
standardStamp.Icon = 'NotApproved';
annotationManager.addAnnotation(standardStamp);

// Text stamp.
const textStamp = new Annotations.StampAnnotation({
  PageNumber: 1,
  X: 220,
  Y: 367,
  Width: 100,
  Height: 45
});
textStamp.setStampText('REVISED', {
  date: '28/07/2023 07:28:28',
  color: 'red', // 'white' | 'red' | 'green' | 'blue'
  shape: 'rectangle' // 'rectangle' | 'leftTriangle' | 'rightTriangle' | 'none'
});
annotationManager.addAnnotation(textStamp);

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

reader.onloadend = async () => {
  const imageBase64 = reader.result;

  const imageStamp = new Annotations.StampAnnotation({
    PageNumber: 1,
    X: 220,
    Y: 367,
    Width: 100,
    Height: 45
  });
  await imageStamp.setImageData(imageBase64);
  annotationManager.addAnnotation(imageStamp);
};

reader.readAsDataURL(imageBlob);