Search results

Change the rectangle annotation’s border color

08 Feb 2023 / 1 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.

Copied to clipboard
<button id="changeColor">Change Color(Blue)</button>
<button id="addRectangleAnnotation">Add Rectangle Annotation</button>
Copied to clipboard
//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