Change rectangle annotation border color in JavaScript PDF Viewer
16 Oct 20251 minute to read
The JavaScript PDF Viewer enables customizing rectangle annotation appearance through the rectangleSettings API, including border color updates.
Step 1: Follow the Getting started with the JavaScript PDF Viewer guide to create a working sample.
Step 2: Insert the following interface elements and script to change the rectangle annotation border color by 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');
});