Adding freehand drawing annotations to a PDF in a browser, with JavaScript
The GemBox.PdfViewer JavaScript library allows you to add hand-drawn annotations to PDF documents opened in a browser, enabling freehand drawing with a pen-like tool directly on any page. This feature is particularly useful for document markup and sketching drawings on existing PDFs.
Basic Usage
To enable the freehand drawing annotation functionality, configure the toolbar options when creating the PDF viewer:
GemBoxPdfViewer.create({
container: "#viewer",
initialDocument: "/document.pdf",
ui: {
toolbar: {
handDrawing: {
isVisible: true // default
}
}
}
});
With this configuration, users can click the hand drawing button in the toolbar and create freehand drawings on any page of a PDF document.
Programmatic Control
You can control the visibility of hand drawing annotation controls programmatically after the PDF viewer has been created:
const viewer = await GemBoxPdfViewer.create({
container: "#viewer",
initialDocument: "/document.pdf"
});
// Show hand drawing controls
viewer.ui.toolbar.handDrawing.isVisible = true;
// Hide hand drawing controls
viewer.ui.toolbar.handDrawing.isVisible = false;
// Check current visibility state
const isHandDrawingVisible = viewer.ui.toolbar.handDrawing.isVisible;
viewer.features.annotations.addEventListener("annotationCreated", function (event) {
// Whether the created annotation is hand drawing.
const isHandDrawing = event.annotation.type == AnnotationType.HANDDRAWING;
if (isHandDrawing) {
console.log("Hand drawing annotation has been added.");
}
});
