Polygon Annotation

A polygon annotation displays a closed shape with multiple sides on a page. When opened, the annotation displays a pop-up window containing the associated note.

DsPdfJS demonstrating how to add polygon annotation in a PDF document

Use the PolygonAnnotation class to add polygon 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: 140, y: 30, width: 160, height: 170 };
const layout = new Layout({
    runs: [{
        text: "A polygon annotation drawn with a 3pt wide purple line around this note",
        font: Font.getPdfFont(StandardPdfFont.Times),
        fontSize: 11
    }],
    maxWidth: rc.width,
    maxHeight: rc.height
});
page.context.drawLayout(layout, rc.x, rc.y);

// Add PolyLineAnnotation using 'json' syntax
page.annotations.add({
    type: 'polygon',
    points:
        [
            { x: rc.x - 5, y: rc.y },
            { x: rc.x + 75, y: rc.y - 10 },
            { x: rc.x + rc.width + 5, y: rc.y },
            { x: rc.x + rc.width + 5, y: rc.y + rc.height },
            { x: rc.x - 5, y: rc.y + rc.height }
        ],
    userName: "Jaime Smith",
    lineWidth: 3,
    lineDashPattern: [5, 2, 15, 4],
    color: "Purple",
    contents: "This is a polygon annotation",
});

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