Circle Annotation

A circle annotation displays a circle or ellipse on the page. When opened, the annotation displays a pop-up window containing the associated note.

The shape of the annotation depends on the dimensions of its bounding rectangle, so it can appear as either a circle or an ellipse.

Use the CircleAnnotation class to add circle annotations to a PDF document.

Note: The examples on this page use helper functions from the Snippet Helpers module. These utilities are provided only to simplify the examples and are not part of the DsPdfJS API.

const doc = new PdfDocument();
const page = doc.newPage();

let rc = { x: 50, y: 50, width: 120, height: 50 };
const layout = new Layout({
    runs: [{
        text: "A circle annotation drawn with a 3pt wide green line",
        font: Font.getPdfFont(StandardPdfFont.Times),
        fontSize: 11
    }],
    maxWidth: rc.width,
    maxHeight: rc.height
});
page.context.drawLayout(layout, rc.x, rc.y);
rc = Util.inflate(rc, 15, 24)

//Create an instance of CircleAnnotation class and set its relevant properties
const circleAnnot = new CircleAnnotation();
circleAnnot.userName = "Jaime Smith";
circleAnnot.rect = rc;
circleAnnot.lineWidth = 3;
circleAnnot.color = "Green";
circleAnnot.contents = "This is a circle annotation";
page.annotations.add(circleAnnot); //Add the circle annotation

const docData = doc.savePdf();
Util.saveFile("CircleAnnotation.pdf", docData);