Change rectangle annotations border color in EJ2 TypeScript Pdfviewer control

16 May 20251 minute to read

The Essential JavaScript PDF Viewer supports customizing the rectangle annotation’s property by using the rectangleSettings API.

Step 1: Follow the steps provided in the link to create simple PDF Viewer sample.

Step 2: Add the following code snippet to change the rectangle annotation’s border color using the rectangleSettings API.

<button id="changeColor">Change Color(Blue)</button>
<button id="addRectangleAnnotation">Add Rectangle Annotation</button>

//Event triggers while clicking the Change Color(Blue) button.
document.getElementById("changeColor").addEventListener('click', function () {
    //API to change the rectangle annotation's stroke color.
    viewer.rectangleSettings.strokeColor = "blue";
});

//Event triggers while clicking the Add Rectangle Annotation button.
document.getElementById("addRectangleAnnotation").addEventListener('click', function () {
    //API to set the rectangle annotation mode.
    viewer.annotation.setAnnotationMode('Rectangle');
});

View sample in GitHub