# Getting error while creating custom annotaion

**URL:** <https://pdfjs.community/t/getting-error-while-creating-custom-annotaion/229>\
**Category:** Technical Support\
**Created:** [August 24, 2020, 10:27am UTC](https://pdfjs.community/t/getting-error-while-creating-custom-annotaion/229 "2020-08-24T10:27:32Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![maharoh9841](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/maharoh9841/32/88_2.png) [@maharoh9841](https://pdfjs.community/u/maharoh9841)\
**Post date:** [August 24, 2020, 10:27am UTC](https://pdfjs.community/t/getting-error-while-creating-custom-annotaion/229/1 "2020-08-24T10:27:32Z")

</div>

**Detailed description of issue**  
I followed this documentation for custom annotation  
[https://pdfjs.express/documentation/annotation/custom-annotations](https://pdfjs.express/documentation/annotation/custom-annotations)  
But I get the following error:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/a584eabed2cbfc56bacafe621753856aa24c8dca.png)

**Code snippet**  
this code is in my myConfig.js file  
WebViewer({

```
path: '../public'

```

})

.then((instance) =\> {

```
const {

  Annotations,

  Tools,

  annotManager,

  docViewer

} = instance;

const TriangleAnnotation = () => {

  Annotations.MarkupAnnotation.call(this);

  this.Subject = 'Triangle';

}

TriangleAnnotation.prototype = new Annotations.MarkupAnnotation();

TriangleAnnotation.prototype.elementName = 'triangle';

TriangleAnnotation.prototype.draw = (ctx, pageMatrix) => {

  this.setStyles(ctx, pageMatrix);

  ctx.translate(this.X, this.Y);

  ctx.beginPath();

  ctx.moveTo(this.Width / 2, 0);

  ctx.lineTo(this.Width, this.Height);

  ctx.lineTo(0, this.Height);

  ctx.closePath();

  ctx.fill();

  ctx.stroke();

}

const TriangleCreateTool = docViewer => {

    Tools.GenericAnnotationCreatetool.call(this, docViewer, RedactionAnnotation);

  }

  TriangleCreateTool.prototype = new Tools.GenericAnnotationCreatetool();

const triangleToolName = 'AnnotationCreateTriangle';

annotManager.registerAnnotationType(TriangleAnnotation.prototype.elementName, TriangleAnnotation);

const triangleTool = new RedactCreateTool(docViewer);

instance.registerTool({

  toolName: triangleToolName,

  toolObject: triangleTool,

  buttonImage: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">' +

    '<path d="M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z"/>' +

    '<path fill="none" d="M0 0h24v24H0V0z"/>' +

    '</svg>',

  buttonName: 'triangleToolButton',

  tooltip: 'Triangle'

}, TriangleAnnotation);

instance.setHeaderItems(header => {

  const triangleButton = {

    type: 'toolButton',

    toolName: triangleButton

  };

  header.get('freeHandToolGroupButton').insertBefore(triangleButton);

});

docViewer.on('documentLoaded', () => {

  // set the tool mode to our tool so that we can start using it right away

  instance.setToolMode(triangleToolName);

});

```

})

---

_[View the full topic](https://pdfjs.community/t/getting-error-while-creating-custom-annotaion/229)._