# How to make Annotation Rectangle tool to enable drawing based on click of annotate button **URL:** \ **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:** 3\ **Page:** 1
**Author:** ![rakshitha\_r](https://avatars.discourse-cdn.com/v4/letter/r/82dd89/32.png) [@rakshitha\_r](https://pdfjs.community/u/rakshitha_r)\ **Post date:** [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/1 "2022-09-21T13:30:08Z")
**Which product are you using?** PDF.js Express Viewer _PDF.js Express Version_\* 8 **Detailed description of issue** i have Annotate button on my PDF.js viewer, now whether i click or not i am able to draw the rectangle box for area i want to add annotation. so in my requirement, except rectangular red tool, we shouldnt use any, accordingly i have handled, so only rectangle tool is available. ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/5/5d389f250313c8bcee4f0ef81da35b9088a1a79d.png) **Expected behaviour** After click on that button only, user must be able to draw rectangular annotation **Does your issue happen with every document, or just one?** yes **Link to document** {Provide a link to the document in question if possible} **Code snippet** ```javascript WebViewer( { path: '../../wv-resources/lib', }, this.viewer.nativeElement ).then((instance: any) => { const { documentViewer, annotationManager, Annotations } = instance.Core; this.hidingButtons(instance, documentViewer, Annotations); // bind pdf based on api hit with base64ToBlob format instance.UI.loadDocument(this.base64ToBlob(doc), { filename: 'myfile.pdf' }); // setting title to userRole instead of Guest instance.Core.annotationManager.setCurrentUser(this.role); // Rectangular Annotation instance.UI.setToolMode(instance.Core.Tools.ToolNames.RECTANGLE); if (instance.UI.getToolMode().name === 'AnnotationCreateRectangle') { instance.UI.disableElements(['annotationStyleEditButton']); } }) hidingButtons(instance: any, documentViewer: any, Annotations: any) { instance.UI.setHeaderItems(function (header: any) { const toolsOverlay = header.getHeader('toolbarGroup-Annotate').get('toolsOverlay'); }); instance.UI.disableElements([ 'toggleNotesButton', 'toolbarGroup-Shapes', 'toolbarGroup-Edit', 'toolbarGroup-Insert', 'toolsHeader', 'toolbarGroup-View', 'toolbarGroup-FillAndSign', 'annotationCommentButton', 'annotationStyleEditButton', 'annotationDeleteButton', 'annotationCropButton', 'annotationRedactButton', 'annotationGroupButton', 'annotationUngroupButton', 'calibrateButton', 'linkButton', 'fileAttachmentDownload', 'toolbarGroup-Shapes', 'panToolButton', 'colorPickerColors', 'stylePopup', 'textPopup', 'contextMenuPopup', 'ColorPickerModal', 'selectToolButton', 'highlightToolButton2', 'highlightToolButton3', 'highlightToolButton4', 'searchButton', 'textStrikeoutToolButton', 'textHighlightToolButton', 'textSquigglyToolButton', 'leftPanelButton', 'menuButton', 'viewControlsButton', 'highlightToolButton', 'rectangleToolButton', 'rectangleToolButton4', 'rectangleToolButton3', 'rectangleToolButton2', 'underlineToolButton', 'underlineToolButton2', 'underlineToolButton3', 'underlineToolButton4', 'strikeoutToolButton', 'strikeoutToolButton2', 'strikeoutToolButton3', 'strikeoutToolButton4', 'squigglyToolButton', 'squigglyToolButton2', 'squigglyToolButton3', 'squigglyToolButton4', 'stickyToolButton', 'stickyToolButton2', 'stickyToolButton3', 'stickyToolButton4', 'stickyToolButton', 'stickyToolButton2', 'stickyToolButton3', 'stickyToolButton4', 'freeTextToolButton', 'freeTextToolButton2', 'freeTextToolButton3', 'freeTextToolButton4', 'freeHandToolButton', 'freeHandToolButton2', 'freeHandToolButton3', 'freeHandToolButton4', ]); instance.UI.disableFeatures([instance.UI.Feature.Print]); // disable text selection instance.UI.disableFeatures([instance.UI.Feature.TextSelection]); } ``` ---
**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\ **Post date:** [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/3 "2022-09-21T13:30:13Z")
**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: Guides: - [Manually download and integrate PDF.js Express Viewer - Integrate into your application](https://pdfjs.express/documentation/get-started-viewer/manually#integrate-into-your-application) - [Customize toolbar in viewer](https://pdfjs.express/documentation/ui-customization/customizing-header.8) - [Manually Download & integrate PDF.js Express Plus - Integrate into your application](https://pdfjs.express/documentation/get-started/manually#integrate-into-your-application) APIs: - [UndefinedannotationsDrawn](https://pdfjs.express/api/namespaces.list.html#event:annotationsDrawn__anchor) - [PDF.js Express Utilities](https://pdfjs.express/api/utils/index.html#__anchor) - [Adding a download button](https://pdfjs.express/api/utils/tutorial-Adding%20a%20download%20button.html#__anchor) Forums: - [How hide annotation when toolbar group changed](https://pdfjs.community/t/how-hide-annotation-when-toolbar-group-changed/1574/1) - [How to render xfdf back into pdf](https://pdfjs.community/t/how-to-render-xfdf-back-into-pdf/2026/1) - [Enable annotations to be moved using arrow keys](https://pdfjs.community/t/enable-annotations-to-be-moved-using-arrow-keys/602/1) 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) ---
**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")
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)