Change rectangle annotations border color in EJ2 TypeScript Pdfviewer control

8 May 20231 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.

View sample in GitHub