# How to change annotation styles for area and line tool like Stripped color and dashes

**URL:** <https://pdfjs.community/t/how-to-change-annotation-styles-for-area-and-line-tool-like-stripped-color-and-dashes/501>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [February 16, 2021, 1:28pm UTC](https://pdfjs.community/t/how-to-change-annotation-styles-for-area-and-line-tool-like-stripped-color-and-dashes/501 "2021-02-16T13:28:11Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kiran.patil](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@kiran.patil](https://pdfjs.community/u/kiran.patil)\
**Post date:** [February 16, 2021, 1:28pm UTC](https://pdfjs.community/t/how-to-change-annotation-styles-for-area-and-line-tool-like-stripped-color-and-dashes/501/1 "2021-02-16T13:28:11Z")

</div>

Check attached image. Here I want to change drawn annotations (perimeter and area) to dashed colored strips same as that red-white stripped lines. ( Here in image, that red stripped annotations are in readOnly mode - `instance.setReadOnly(true)`. But I dont want to apply readOnly mode instead change annotation’s apperance to the same as readOnly mode alike(red-white stripped).

![highlight.PNG](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/25e384e1271dd4c61267999be8247706de777102.jpeg)

I want to set annotation styles after some action from normal straight red colored annotation to stripped red colored annotation. I am using -  
`instance.annotManager.setAnnotationStyles(annotation, ....)`  
How can I use this to change annotation styles ?

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [February 17, 2021, 4:39pm UTC](https://pdfjs.community/t/how-to-change-annotation-styles-for-area-and-line-tool-like-stripped-color-and-dashes/501/2 "2021-02-17T16:39:34Z")

</div>

Hey there,

You need to override the draw function of whatever annotation you want to draw like this.

You can use the [setCustomDrawHandler](https://pdfjs.express/api/Annotations.html#.setCustomDrawHandler__anchor) API to extend the draw function of an annotation.

```javascript
  const { Annotations } = instance;

 Annotations.setCustomDrawHandler(Annotations.PolylineAnnotation, (ctx, pageMatrix, _, options) => {
    if (options.annotation.ToolName === "AnnotationCreatePerimeterMeasurement") {
      ctx.setLineDash([15, 3, 3, 3]);
    }
    
    options.originalDraw(ctx, pageMatrix)
  })

```

In this function you have access to the canvas context, and you can do whatever you wish with that. In this scenerio, I’m calling [`setLineDash`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash) to make the line dashed.

If you want, you can completely override this function and draw the entire annotation yourself:

```javascript
  Annotations.setCustomDrawHandler(Annotations.PolylineAnnotation, (ctx: CanvasRenderingContext2D, pageMatrix, __, options) => {
    if (options.annotation.ToolName === "AnnotationCreatePerimeterMeasurement") {
      const paths = options.annotation.getPath();
      ctx.beginPath();
      ctx.strokeStyle = 'red'
      ctx.setLineDash([15, 3, 3, 3]);
      ctx.moveTo(paths[0]['x'], paths[0]['y']);
      for (let i = 1; i < paths.length; i++) {
        ctx.lineTo(paths[i]['x'], paths[i]['y']);
      }

      ctx.stroke();
      ctx.closePath();
      
    } else {
      options.originalDraw(ctx, pageMatrix)
    }
  })

```

This allows you to draw the lines however you wish.

Hopefully this is enough to get you started! Let me know if you need any more help.

Thanks,  
Logan