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');
});