# How can I convert a square annotation to a highlight annotation?
**URL:** https://pdfjs.community/t/how-can-i-convert-a-square-annotation-to-a-highlight-annotation/2759
**Category:** Technical Support
**Created:** [August 4, 2023, 12:09pm UTC](https://pdfjs.community/t/how-can-i-convert-a-square-annotation-to-a-highlight-annotation/2759 "2023-08-04T12:09:38Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@beatriz.patriota](https://pdfjs.community/u/beatriz.patriota)
#### Post date: [August 4, 2023, 12:09pm UTC](https://pdfjs.community/t/how-can-i-convert-a-square-annotation-to-a-highlight-annotation/2759/1 "2023-08-04T12:09:38Z")
**Which product are you using?**
PDF.js Express Plus
---
### Author:  [@darian.chen](https://pdfjs.community/u/darian.chen)
#### Post date: [August 4, 2023, 9:17pm UTC](https://pdfjs.community/t/how-can-i-convert-a-square-annotation-to-a-highlight-annotation/2759/3 "2023-08-04T21:17:45Z")
Hello Beatriz,
Could you please clarify which highlight tool you are referring to and what version of PDF.js you are using?
Which situation do you want to convert the rectangle annotation to a highlight annotation?
If you want to highlight an area of text captured by the rectangle annotation, you can use the following code snippet below.
```javascript
const { Annotations, annotationManager } = instance.Core;
let debounce = null;
annotationManager.addEventListener("annotationSelected", (annots) => {
annots.forEach((annot) => {
if (annot instanceof Annotations.RectangleAnnotation) {
// get page number and quads from rectangle annotation
const pageNumber = annot.getPageNumber();
const quads = [annot.getRect().toQuad()];
// Add some debouncing to prevent constant triggering during selection
if (debounce) {
clearTimeout(debounce);
}
debounce = setTimeout(() => {
// Create highlight annotation with object initializer
const highlight = new Annotations.TextHighlightAnnotation({
PageNumber: pageNumber,
Quads: quads,
StrokeColor: new Annotations.Color(255, 0, 0, 1),
});
// delete the rectangle annotation and redraw the highlight annotation for the captured text
annotationManager.addAnnotation(highlight);
annotationManager.deleteAnnotation(annot);
annotationManager.redrawAnnotation(highlight);
debounce = null;
}, 1000);
}
});
});
```
Hope this helps.
Best Regards,
Darian Chen
---
### Author:  [@beatriz.patriota](https://pdfjs.community/u/beatriz.patriota)
#### Post date: [August 7, 2023, 5:23pm UTC](https://pdfjs.community/t/how-can-i-convert-a-square-annotation-to-a-highlight-annotation/2759/4 "2023-08-07T17:23:52Z")
I import square annotations and I want to transform then into highlight annotations just like your example, but all of them at once
---
### Author:  [@beatriz.patriota](https://pdfjs.community/u/beatriz.patriota)
#### Post date: [August 7, 2023, 5:24pm UTC](https://pdfjs.community/t/how-can-i-convert-a-square-annotation-to-a-highlight-annotation/2759/5 "2023-08-07T17:24:18Z")
Also how cant I put the square annotation under the text?
---
### Author:  [@darian.chen](https://pdfjs.community/u/darian.chen)
#### Post date: [August 7, 2023, 5:53pm UTC](https://pdfjs.community/t/how-can-i-convert-a-square-annotation-to-a-highlight-annotation/2759/6 "2023-08-07T17:53:02Z")
Hello Beatriz,
I’m not sure what you mean by putting the square annotation under the text, could you please clarify?
If you are using the importAnnotations or importAnnotationCommand API, you can use the following code snippet to highlight all areas captured by the imported rectangle annotations.
```javascript
const { Annotations, annotationManager } = instance.Core;
annotationManager.addEventListener("annotationChanged", (annots, action, { imported }) => {
if (imported) {
annots.forEach((annot) => {
if (annot instanceof Annotations.RectangleAnnotation) {
// get page number and quads from rectangle annotation
const pageNumber = annot.getPageNumber();
const quads = [annot.getRect().toQuad()];
// Create highlight annotation with object initializer
const highlight = new Annotations.TextHighlightAnnotation({
PageNumber: pageNumber,
Quads: quads,
StrokeColor: new Annotations.Color(255, 0, 0, 1),
});
// redraw the highlight annotation for the captured text
annotationManager.addAnnotation(highlight);
annotationManager.redrawAnnotation(highlight);
}
});
}
});
```
Best Regards,
Darian Chen
---
### Author:  [@beatriz.patriota](https://pdfjs.community/u/beatriz.patriota)
#### Post date: [August 7, 2023, 6:35pm UTC](https://pdfjs.community/t/how-can-i-convert-a-square-annotation-to-a-highlight-annotation/2759/7 "2023-08-07T18:35:50Z")
Ffor the square to be like this:
---
### Author:  [@beatriz.patriota](https://pdfjs.community/u/beatriz.patriota)
#### Post date: [August 7, 2023, 6:36pm UTC](https://pdfjs.community/t/how-can-i-convert-a-square-annotation-to-a-highlight-annotation/2759/8 "2023-08-07T18:36:11Z")
How can I get the title of the square annotation and set to the highlight annotation?
---
### Author:  [@darian.chen](https://pdfjs.community/u/darian.chen)
#### Post date: [August 7, 2023, 7:01pm UTC](https://pdfjs.community/t/how-can-i-convert-a-square-annotation-to-a-highlight-annotation/2759/9 "2023-08-07T19:01:37Z")
Hello Beatriz,
Depending on where you import the rectangle annotations, those areas will be highlighted. In your image, if you want that area to be highlighted, you need to import the rectangle onto that line of text.
To get the name of the annotations, you can use **elementName** property. There is also an **Id** property.
```javascript
annot.elementName;
annot.Id;
```
Best Regards,
Darian Chen
---
### Author:  [@beatriz.patriota](https://pdfjs.community/u/beatriz.patriota)
#### Post date: [August 7, 2023, 7:08pm UTC](https://pdfjs.community/t/how-can-i-convert-a-square-annotation-to-a-highlight-annotation/2759/10 "2023-08-07T19:08:07Z")
It doesn’t work
---
### Author:  [@darian.chen](https://pdfjs.community/u/darian.chen)
#### Post date: [August 7, 2023, 7:25pm UTC](https://pdfjs.community/t/how-can-i-convert-a-square-annotation-to-a-highlight-annotation/2759/11 "2023-08-07T19:25:15Z")
Hello Beatriz,
My apologies for misunderstanding the question. You can set the author of the highlight annotation by using the **Author** property like in the following in image.
Best Regards,
Darian Chen
---
### Author:  [@beatriz.patriota](https://pdfjs.community/u/beatriz.patriota)
#### Post date: [August 7, 2023, 7:58pm UTC](https://pdfjs.community/t/how-can-i-convert-a-square-annotation-to-a-highlight-annotation/2759/12 "2023-08-07T19:58:30Z")
Thanks! How can I get the selected text of a highlight annotation?
---
### Author:  [@darian.chen](https://pdfjs.community/u/darian.chen)
#### Post date: [August 8, 2023, 4:04pm UTC](https://pdfjs.community/t/how-can-i-convert-a-square-annotation-to-a-highlight-annotation/2759/13 "2023-08-08T16:04:05Z")
Hello Beatriz,
There currently doesn’t seem to be a way to get highlighted text by creating the highlight with the above suggested method. It seems you need to select the text in order to get it, as done by the highlight tool.
Please see the link below to learn more about the available APIs and members for the text highlight annotation.
**Guide** : [PDFJS Express WebViewer Class: TextHighlightAnnotation](https://pdfjs.express/api/Core.Annotations.TextHighlightAnnotation.html)
Best Regards,
Darian Chen