# I want to create custom circle annotation which I want to use as a stamp

**URL:** <https://pdfjs.community/t/i-want-to-create-custom-circle-annotation-which-i-want-to-use-as-a-stamp/662>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [March 25, 2021, 12:31pm UTC](https://pdfjs.community/t/i-want-to-create-custom-circle-annotation-which-i-want-to-use-as-a-stamp/662 "2021-03-25T12:31:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kiran.patil](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@kiran.patil](https://pdfjs.community/u/kiran.patil)\
**Post date:** [March 25, 2021, 12:31pm UTC](https://pdfjs.community/t/i-want-to-create-custom-circle-annotation-which-i-want-to-use-as-a-stamp/662/1 "2021-03-25T12:31:20Z")

</div>

**PDF.js Express Version**  
7.3.1

**Detailed description of issue**  
 ![count-tool (1)](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/803e75d684e48356e9e28b4318bff86dd1bc40fd.gif)

Instead of that checkmark, I want to have a custom annotation - A perfect circle as shown below:  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/e1a089260788db2d44f001bfbd73322aa25db138.png)

I know I can use Ellipse tool but how to create a perfect circle. I mean it should be like just click and drop that circle annotation as many times of number of clicks.  
**Expected behaviour**  
Same as above Gif depicts. Just click multiple times to drop that perfect circle. So our expectation is to use that as a count tool.

Thanks,  
Kiran

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [March 25, 2021, 12:31pm UTC](https://pdfjs.community/t/i-want-to-create-custom-circle-annotation-which-i-want-to-use-as-a-stamp/662/2 "2021-03-25T12:31:21Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

- [Annotations.EllipseAnnotation - new EllipseAnnotation()](https://pdfjs.express/api/Annotations.EllipseAnnotation.html#EllipseAnnotation__anchor)
- [Annotations.WidgetFlags - new WidgetFlags(options)](https://pdfjs.express/api/Annotations.WidgetFlags.html#WidgetFlags__anchor)
- [Create custom annotation in PDF.js Express](https://pdfjs.express/documentation/samples/custom-annotations)
- [WebViewerInstance - setMaxSignaturesCount( [maxSignaturesCount])](https://pdfjs.express/api/WebViewerInstance.html#setMaxSignaturesCount__anchor)
- [WebViewerInstance - setCustomNoteFilter(filterAnnotation)](https://pdfjs.express/api/WebViewerInstance.html#setCustomNoteFilter__anchor)

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [March 25, 2021, 3:46pm UTC](https://pdfjs.community/t/i-want-to-create-custom-circle-annotation-which-i-want-to-use-as-a-stamp/662/3 "2021-03-25T15:46:35Z")

</div>

Hey there,

The best way to do this is with a custom tool. Here’s some code to get you started. You will just have to edit any parameters you would like to change

```javascript
  const { Annotations, Tools, docViewer, annotManager } = instance;
  
  const CircleCreateTool = function (docViewer) {
    Tools.GenericAnnotationCreateTool.call(this, docViewer, Annotations.EllipseAnnotation);
  }
  CircleCreateTool.prototype = new Tools.GenericAnnotationCreateTool();

  CircleCreateTool.prototype.mouseLeftUp = function (e) {
    Tools.GenericAnnotationCreateTool.prototype.mouseLeftUp.call(this);
    const annot = new Annotations.EllipseAnnotation();
    annot.Width = 10;
    annot.Height = 10;
    const pageCoordinates = this['pageCoordinates'][0];
    annot.X = pageCoordinates['x'];
    annot.Y = pageCoordinates['y'];
    annot.FillColor = new Annotations.Color(255, 0, 0);
    annot.StrokeColor = new Annotations.Color(255, 0, 0);
    annotManager.addAnnotation(annot);
    annotManager.drawAnnotations({ pageNumber: annot.PageNumber, majorRedraw: true })
  }

  const circleTool = new CircleCreateTool(docViewer);
  instance.registerTool({
    toolName: 'circleTool',
    toolObject: circleTool,
    buttonImage: `https://www.dishwasherhero.com/wp-content/uploads/2020/01/orange-circle-background.png`,
    buttonName: 'circleToolButton',
    tooltip: 'Circle'
  }, Annotations.EllipseAnnotation);

  instance.setHeaderItems(header => {
    const triangleButton = {
      type: 'toolButton',
      toolName: 'circleTool'
    };
    header.getHeader('toolbarGroup-Annotate').get('highlightToolGroupButton').insertBefore(triangleButton);
  });

```