Section:

Customize Annotation Rendering

The PDF specification provides the definition of a standard set of annotations, but not how they are visually represented on screen as that is left to the document viewers. WebViewer allows changing how annotations are rendered when viewing them using the setCustomDrawHandler API. This can be applied to both standard and custom annotations in WebViewer.

If you are using custom annotations, they already have support for custom rendering. However, implementing one may be too much if you only want to change how annotations look, especially the standard set. This API will allow you to change how the annotations render without having to implement one.

The APIs in this guide are only available in WebViewer 7.1+.

Changing annotation rendering

To change how annotations are rendered, you can use the setCustomDrawHandler API.

JavaScript (v7.0+)

1Annotations.setCustomDrawHandler(Annotations.RectangleAnnotation, function(ctx, pageMatrix, rotation, options) {
2    options.originalDraw(ctx, pageMatrix, rotation);
3    ctx.save();
4    ctx.fillStyle = '#000000';
5    ctx.fillText('Hello', this.X, this.Y + 12);
6    ctx.restore();
7});

Related Links

Apryse Docs Image

Draw handler function

Alongside the annotation class you are targeting, you must provide a new, custom draw function to the API that will perform the rendering. It takes the regular parameters you would expect from an annotation draw function with an additional options parameter. If you are using an arrow function (bound function), then you can find the annotation through the options parameter.

JavaScript (v7.0+)

1// Draw handler signature
2function(ctx, pageMatrix, rotation, options) {
3  ...
4}

Related Links

Note that you get the annotation being drawn as well as the original annotation's draw function as part of the options parameter. This allows you to reference the annotation and perform the original draw if necessary.

Appearances

Although this works with annotations in WebViewer, other viewers will render the annotations according to how they render the annotations. By default, setCustomDrawHandler will generate an appearance for the annotation so it will look similar in other viewers. If you want to turn this off, perhaps for changing rendering at certain times or it's unnecessary, you can set the generateAppearance option in the third parameter of the API.

JavaScript (v7.0+)

1Annotations.setCustomDrawHandler(Annotations.RectangleAnnotation, function(ctx, pageMatrix, rotation, options) {
2    ...
3}, {
4  generateAppearance: false,
5  canvasMultiplier: 2, // Increase appearance quality at the cost of memory
6});

Restoring custom annotation rendering

When customizing annotation rendering, the original draw function is preserved. Calling the setCustomDrawHandler API again will not overwrite the original draw function. This allows the original behavior of the annotation to be restored with restoreDraw API.

JavaScript (v7.0+)

1Annotations.restoreDraw(Annotations.RectangleAnnotation);

Related Links

Next steps

Check out how to customize the serialization/deserialization behavior of annotations to save your custom properties.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales