# How to set FillColor and StrokeColor of TextHighlightAnnotation

**URL:** <https://pdfjs.community/t/how-to-set-fillcolor-and-strokecolor-of-texthighlightannotation/2843>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [September 21, 2023, 9:00am UTC](https://pdfjs.community/t/how-to-set-fillcolor-and-strokecolor-of-texthighlightannotation/2843 "2023-09-21T09:00:57Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![user45](https://avatars.discourse-cdn.com/v4/letter/u/7ab992/32.png) [@user45](https://pdfjs.community/u/user45)\
**Post date:** [September 21, 2023, 9:00am UTC](https://pdfjs.community/t/how-to-set-fillcolor-and-strokecolor-of-texthighlightannotation/2843/1 "2023-09-21T09:00:57Z")

</div>

**Which product are you using?**  
PDF.js Express

**PDF.js Express Version**  
8.7.0

**Detailed description of issue**  
I need to set FillColor and StrokeColor of TextHighlightAnnotation.  
I tried set:

```javascript
const { Annotations } = this.viewerCore;
const annot = new this.Annotations.TextHighlightAnnotation();
annot.StrokeColor = strokeColor;
annot.FillColor = fillColor;
annot.FillDisplayColor = fillColor;

```

but I receive only highlight text, without border.  
Moreover this works correctly when I export xfdf annotation and import them back.  
How can I achieve it?

---

<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 22, 2023, 4:38pm UTC](https://pdfjs.community/t/how-to-set-fillcolor-and-strokecolor-of-texthighlightannotation/2843/3 "2023-09-22T16:38:28Z")

</div>

Hi there,

It looks like you are missing the addAnnotation and drawAnnotation after creating the highlight annotation.  
Please follow the guide here to create a highlight annotation:

> **[PDF.js Express Highlight Annotation | Documentation](https://pdfjs.express/documentation/annotation/create-annotation-highlight)**

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![user45](https://avatars.discourse-cdn.com/v4/letter/u/7ab992/32.png) [@user45](https://pdfjs.community/u/user45)\
**Post date:** [September 22, 2023, 5:21pm UTC](https://pdfjs.community/t/how-to-set-fillcolor-and-strokecolor-of-texthighlightannotation/2843/4 "2023-09-22T17:21:42Z")

</div>

I call `addAnnotation` and `drawAnnotation ` after creating the highlight annotation, just I not include it in code sample.

![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/b/b6eb2b3b18ec06faf23e9ad46a8542c200fbe8f8.png)  
1.) When I import this sample annotation  
2.) When I try to add this annotation immadiantely with `addAnnotation` and `drawAnnotation ` method

---

<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 22, 2023, 5:29pm UTC](https://pdfjs.community/t/how-to-set-fillcolor-and-strokecolor-of-texthighlightannotation/2843/5 "2023-09-22T17:29:13Z")

</div>

Hi there,

Thanks for your response,

For the 1st example, it looks like there is no fill color/opacity compared to 2nd example.  
Could you share the XFDF for both annotations to compare?

best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![user45](https://avatars.discourse-cdn.com/v4/letter/u/7ab992/32.png) [@user45](https://pdfjs.community/u/user45)\
**Post date:** [September 22, 2023, 8:43pm UTC](https://pdfjs.community/t/how-to-set-fillcolor-and-strokecolor-of-texthighlightannotation/2843/6 "2023-09-22T20:43:10Z")

</div>

I don’t have XFDF for both annotations because:

- the 2nd was created programmaticaly,
- the 1st one from xfdf importAnnotations

It’s looks like when I try add annotation programmaticaly 0.5 opacity on content doesn’t work, but during importing works correctly. (or if opacity work, I lose border)  
I tried also redrawAnnotation but this was not effectively.  
How can I achieve it with TextHighlightAnnotation during adding programmaticaly?

---

<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 22, 2023, 9:02pm UTC](https://pdfjs.community/t/how-to-set-fillcolor-and-strokecolor-of-texthighlightannotation/2843/7 "2023-09-22T21:02:54Z")

</div>

Hi there,

To get the XFDF of all the annotations in your PDF, you can call annotationManager.exportAnnotations()

For text highlight annotation, there is no border property:  
[https://pdfjs.express/api/Core.Annotations.TextHighlightAnnotation.html](https://pdfjs.express/api/Core.Annotations.TextHighlightAnnotation.html)

I think the XFDF that you are importing has a opacity property and that is why it is causing the difference.

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![user45](https://avatars.discourse-cdn.com/v4/letter/u/7ab992/32.png) [@user45](https://pdfjs.community/u/user45)\
**Post date:** [September 25, 2023, 10:05am UTC](https://pdfjs.community/t/how-to-set-fillcolor-and-strokecolor-of-texthighlightannotation/2843/8 "2023-09-25T10:05:35Z")

</div>

Did `stroke` property shouldn’t work for it? I was set `stroke` property correctly.

---

<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 25, 2023, 1:45pm UTC](https://pdfjs.community/t/how-to-set-fillcolor-and-strokecolor-of-texthighlightannotation/2843/9 "2023-09-25T13:45:51Z")

</div>

Hi there,

To get the alpha of the fill color, you will want to adjust the ‘StrokeColor’ with a 4th number,  
i.e.  
`highlight.StrokeColor = new Annotations.Color(255, 255, 0, 0.5);`

StrokeThickness may be the attribute you are looking for.

Best regards,  
Kevin Kim