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.

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

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

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.

// Draw handler signature
function(ctx, pageMatrix, rotation, options) {
  ...
}

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.

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.

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

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.

Annotations.restoreDraw(Annotations.RectangleAnnotation);

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