# Polygon Annotation

## Content

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.
![Polygon-Annotation.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Polygon-Annotation-20260424.b7e68e.png?width=720)
Use the [PolygonAnnotation](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PolygonAnnotation) class to add polygon annotations to a PDF document.

>type=note
> **Note:** The examples on this page use helper functions from the [Snippet Helpers](https://developer.mescius.com/document-solutions/javascript-pdf-api/docs/snippet-helpers) module. These utilities are provided only to simplify the examples and are not part of the DsPdfJS API.

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