# How to make Annotation Rectangle tool to enable drawing based on click of annotate button

**URL:** <https://pdfjs.community/t/how-to-make-annotation-rectangle-tool-to-enable-drawing-based-on-click-of-annotate-button/2053>\
**Category:** Technical Support\
**Created:** [September 21, 2022, 1:30pm UTC](https://pdfjs.community/t/how-to-make-annotation-rectangle-tool-to-enable-drawing-based-on-click-of-annotate-button/2053 "2022-09-21T13:30:08Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [September 21, 2022, 6:11pm UTC](https://pdfjs.community/t/how-to-make-annotation-rectangle-tool-to-enable-drawing-based-on-click-of-annotate-button/2053/4 "2022-09-21T18:11:45Z")

</div>

Hello rakshitha\_r,

If you want to hide all the tools except the rectangular annotation tool, you can hide the elements like so from the WebViewer constructor or programatically like you have:

> **[Hide & Disable Buttons in PDF.js Express Viewer | Documentation](https://pdfjs.express/documentation/ui-customization/hiding-elements#enablingdisabling-elements-programmatically)**

On your annotate button, you can bind a ‘click’ event to set the tool mode:  
[https://pdfjs.express/api/Core.DocumentViewer.html#setToolMode](https://pdfjs.express/api/Core.DocumentViewer.html#setToolMode)  
and the toolNames are available here: [PDFJS Express WebViewer Namespace: Tools](https://pdfjs.express/api/Core.Tools.html#.ToolNames)

```javascript
  document.getElementById('annotate-button').addEventListener('click', async (e) => {
    instance.UI.setToolMode(instance.Core.Tools.ToolNames.RECTANGLE)
  })

```

And if you would like to customize the style you can follow the forum guide here:

> [@Open annotation style popup on click of a button outside viewer](https://pdfjs.community/t/open-annotation-style-popup-on-click-of-a-button-outside-viewer/608/3):
>
> Hey there, The annotation style popup need to be associated with an annotation and cannot just be opened freely. If you want something like this, it might be best to use your own color picker (theres a ton of JS libraries that can do this) and using that instead. Once you have the color you want to change annots too, you can simply loop over them and update their stroke and fill styles: const { annotManager, Annotations} = instance; const annots = annotManager.getAnnotationsList(); fo…

Best Regards,  
Kevin Kim

Share how you are using PDF.js Express in your organization you could win a **$500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free**. Learn more [here](https://utm.guru/ueQNw)

---

_[View the full topic](https://pdfjs.community/t/how-to-make-annotation-rectangle-tool-to-enable-drawing-based-on-click-of-annotate-button/2053)._