Environment:
Problem:
We use RectangleAnnotation to highlight geo-tagged bounding box regions on a PDF page. Each annotation is created with Opacity = 0.5. When multiple bounding boxes overlap spatially on the same page, the overlapping regions visually darken progressively — more overlaps = darker — eventually making the underlying PDF text completely invisible.
Steps to Reproduce:
-
Initialize WebViewer and load any PDF document.
-
Programmatically create two Annotations.RectangleAnnotation objects.
-
Position them so that they partially overlap each other.
-
Set the Opacity for both annotations to 0.5 (or any value below 1.0).
-
Set a FillColor (e.g., Yellow) for both.
-
Add both to the AnnotationManager and call drawAnnotations().
-
Observed Result: The area where the two rectangles overlap is significantly darker than the non-overlapping areas, and the text underneath becomes hard to read.
Question:
We need to stick with RectangleAnnotation due to the geo-tagged coordinate data we receive. What is the correct WebViewer JS API or configuration to render multiple overlapping RectangleAnnotation objects with a uniform flat opacity, so the overlap area looks identical to non-overlapping areas (i.e. no opacity compounding between annotations)? Is there a global setting or a specific BlendMode that handles this for the entire layer?
Hello @saibalakrishna7799 ,
Thank you for posting on our forum.
Currently the overlapping opacities are expected behavior based on our default blend mode.
Under the hood, we currently allow either a “multiply” or a “add” blend mode with annotations; but either way there will still be a difference how the opacity appears.
What is the particular workflow which causes there to be several highlight annotations overlapping each other?
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.
Thanks for the response.
In our workflow, we receive geo-tagged bounding box data for multiple data artifact fields, and we render each of these as a RectangleAnnotation on the PDF.
In many cases, multiple fields map to the same or very close text regions, which results in several rectangle annotations overlapping on the same area of the document. Since each annotation has a fill opacity (e.g., 0.5), these overlaps cause the opacity to compound visually, making the underlying text increasingly darker and, in some cases, completely unreadable.
So the issue arises specifically when multiple annotations are stacked on the same text region as part of our field-mapping process.
We’re looking for a way to maintain consistent visual highlighting without losing text readability in these overlap scenarios.
Hello @saibalakrishna7799 ,
Apologies for the delay. Thank you for the clarification regarding your use case. We’ve reached out to our Development team to help investigate whether the behavior is possible based on your outlined workflow.
We will be sure to reach out once we have an update.
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.
Hello @saibalakrishna7799,
Thank you for your patience. To mitigate the stacking opacity; you can adjust the BlendMode property on the annotations affected.
You can find the API doc for this property here: Apryse WebViewer Class: Annotation
For your convenience, there is also an additional forum post which has a similar issue here: https://community.apryse.com/t/overlapping-rectangleannotations-cause-opacity-stacking-and-unreadable-text/12518/4
Feel free to look at the solution provided there for an example on the expected behavior.
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.
