# Circle Annotation

## Content

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.
![Circle-Annotation.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Circle-Annotation-20260424.730b9e.png?width=720)
Use the[ CircleAnnotation ](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/CircleAnnotation)class to add circle 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: 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);
```