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

PDF.js Express Version
7.3.1

Detailed description of issue
count-tool (1)

Instead of that checkmark, I want to have a custom annotation - A perfect circle as shown below:
image

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

Hello, I’m Ron, an automated tech support bot :robot:

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

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

  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);
  });