Ink Annotation

An ink annotation represents a freehand scribble composed of one or more disjoint paths. When opened, the annotation displays a pop-up window containing the associated note.

The drawing is defined by specifying one or more paths through the paths property.

Use the InkAnnotation class to add ink annotations to a PDF document.

Note: The examples on this page use helper functions from the Snippet Helpers module. These utilities are provided only to simplify the examples and are not part of the DsPdfJS API.

const doc = new PdfDocument();
const page = doc.newPage();

let rc = { x: 50, y: 50, width: 250, height: 50 };
const layout = new Layout({
    runs: [{
        text: "This sample creates an ink annotation and shows how to use the " +
            "InkAnnotation.paths property",
        font: Font.getPdfFont(StandardPdfFont.Times),
        fontSize: 11
    }],
    maxWidth: rc.width,
    maxHeight: rc.height
});
page.context.drawLayout(layout, rc.x, rc.y);

//Create an instance of InkAnnotation class and set its relevant properties
const inkAnnot = new InkAnnotation();
inkAnnot.userName = "Jaime Smith";
inkAnnot.rect = { x: rc.x, y: rc.y + rc.height + 20, width: 72 * 5, height: 72 * 2 };
inkAnnot.lineWidth = 2;
inkAnnot.color = "DarkBlue";
inkAnnot.contents = "This is an ink annotation drawn via InkAnnotation.Paths."
let x = 80, y = rc.y + rc.height + 24, h = 18, dx = 2, dy = 4, dx2 = 4, w = 10, xoff = 15;

// Scribble 'ink annotation' text:
// i
const paths = [];
paths.push([
    { x: x + w / 2, y: y },
    { x: x + w / 2, y: y + h },
    { x: x + w, y: y + h * 0.7 }
]);
paths.push([
    { x: x + w / 2, y: y },
    { x: x + w / 2, y: y + h },
    { x: x + w, y: y + h * 0.7 }
]);
paths.push([
    { x: x + w / 2 - dx, y: y - h / 3 + dy },
    { x: x + w / 2 + dx, y: y - h / 3 }
]);
// n
x += xoff;
paths.push([
    { x: x, y: y },
    { x: x, y: y + h },
    { x: x, y: y + h - dy },
    { x: x + w * 0.7, y: y },
    { x: x + w - dx / 2, y: y + h * 0.6 },
    { x: x + w, y: y + h },
    { x: x + w + dx2, y: y + h * 0.7 }
]);
// k
x += xoff;
paths.push([
    { x: x, y: y - h / 3 },
    { x: x, y: y + h }
]);
paths.push([
    { x: x + w, y: y },
    { x: x + dx, y: y + h / 2 - dy },
    { x: x, y: y + h / 2 },
    { x: x + dx2, y: y + h / 2 + dy },
    { x: x + w, y: y + h },
    { x: x + w + dx2, y: y + h * 0.7 }
]);
inkAnnot.paths = paths;

page.annotations.add(inkAnnot);

const docData = doc.savePdf();
Util.saveFile("InkAnnotation.pdf", docData);