Free Hand Annotations

Free hand annotations are drawn with one or more paths of points. Each path represents a stroke of the annotation. Free hand annotations are used for signatures and are automatically created by a signature widget after signing.

Free hand annotations can only use the stroke color. Border styles are not supported but the stroke thickness can be adjusted.

When creating free hand annotations in the UI, there is a short delay before the annotations is created which starts after a brief period of inactivity. This is to allow users to add various strokes to the annotation before it is finalized. This delay can be changed .

WebViewer(...)
  .then(instance => {
    const { Core } = instance;
    const { documentViewer, annotationManager, Annotations, Math } = Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annot = new Annotations.FreeHandAnnotation({
        PageNumber: 1,
        StrokeColor: new Annotations.Color(0, 255, 0, 1),
      });

      // Add points to first stroke
      annot.addPathPoint(50, 50, 0);
      annot.addPathPoint(75, 100, 0);
      annot.addPathPoint(100, 50, 0);

      // Add path as second stroke
      annot.setPath([
        new Core.Math.Point(125, 100),
        new Core.Math.Point(150, 50),
        new Core.Math.Point(50, 50),
      ], 1);

      annotationManager.addAnnotation(annot);
      annotationManager.redrawAnnotation(annot);
    });
  });

Element name: ink

<ink page="0" rect="252.430,624.250,313.320,653.380" color="#E44234" flags="print" name="7e849d5b-f6d0-dfe8-7c3f-d0a0f6612eef" title="Guest" subject="Free Hand" date="D:20220629172111-07'00'" creationdate="D:20220629172105-07'00'">
    <inklist>
        <gesture>256.74,652.38;256.74,651.72;256.74,651.72;256.74,651.06;256.74,651.06;256.08,651.06;256.08,647.09;256.08,646.4300000000001;256.08,646.4300000000001;256.08,646.4300000000001;256.08,645.76;256.08,645.76;256.08,645.1;256.08,645.1;255.42,643.78;255.42,643.78;255.42,642.45;255.42,642.45;255.42,641.79;254.76,641.13;254.76,640.47;254.76,640.47;254.76,639.81;254.76,639.15;254.76,639.15;254.76,638.48;254.76,638.48;254.76,637.8199999999999;254.76,637.8199999999999;254.76,637.16;254.09,636.5;254.09,635.84;254.09,635.1800000000001;254.09,634.51;254.09,633.85;253.43,633.85;253.43,633.85;253.43,633.85;253.43,633.19;253.43,633.19;253.43,632.53;253.43,631.87;253.43,631.87;253.43,631.87;253.43,631.21;253.43,631.21;253.43,629.88;253.43,629.88;253.43,629.22;253.43,628.56;253.43,628.56;253.43,627.9;253.43,627.9;253.43,627.9;253.43,627.24;253.43,627.24</gesture>
        <gesture>265.34,647.09;265.34,647.09;265.34,646.4300000000001;265.34,646.4300000000001;265.34,646.4300000000001;265.34,645.76;265.34,645.1;265.34,645.1;265.34,644.44;265.34,643.78;265.34,643.78;264.68,643.12;264.68,642.45;264.68,642.45;264.68,642.45;264.68,641.79;264.68,641.79;264.68,641.13;264.68,641.13;264.68,641.13;264.68,639.81;264.68,639.15;264.02,636.5;264.02,635.84;264.02,635.84;264.02,635.1800000000001;264.02,634.51;264.02,634.51;264.02,633.85;263.36,633.85;263.36,633.19;263.36,632.53;263.36,632.53;263.36,631.21;263.36,631.21;263.36,630.54;263.36,630.54;263.36,629.88;263.36,629.88;263.36,629.22;263.36,629.22;262.7,627.9;262.7,627.9;262.7,627.24;262.7,627.24;262.7,626.5699999999999;262.03,626.5699999999999</gesture>
        <gesture>257.4,636.5;257.4,636.5;258.06,636.5;258.06,636.5;258.73,636.5;259.39,636.5;259.39,636.5;260.05,637.16;260.05,637.16;260.71,637.16;260.71,637.16;260.71,637.8199999999999;261.37,637.8199999999999;261.37,637.8199999999999;262.03,637.8199999999999;264.02,638.48;264.02,638.48;264.68,638.48;264.68,638.48;264.68,638.48;264.68,638.48;265.34,638.48;265.34,639.15;266,639.15;266,639.15;266.67,639.15;266.67,639.15;267.33,639.15;267.33,639.15;267.99,639.15;268.65,639.15;268.65,639.15;269.98,639.15;270.64,639.15;270.64,639.15;270.64,639.15;271.3,639.15;271.3,639.15</gesture>
        <gesture>270.64,631.87;271.3,631.87;271.3,631.87;271.3,631.87;271.96,631.87;271.96,631.87;272.62,632.53;273.28,632.53;273.28,632.53;273.28,632.53;273.95,632.53;273.95,633.19;273.95,633.19;274.61,633.19;274.61,633.19;274.61,633.19;275.27,633.85;275.93,633.85;275.93,633.85;276.59,633.85;276.59,633.85;276.59,633.85;276.59,633.85;278.58,634.51;278.58,635.1800000000001;279.24,635.1800000000001;279.24,635.1800000000001;279.24,635.1800000000001;279.24,635.1800000000001;279.9,635.1800000000001;279.9,635.1800000000001;280.56,635.1800000000001;280.56,635.1800000000001;280.56,635.84;280.56,635.84;281.22,635.84;281.22,635.84;281.89,635.84;281.89,636.5;282.55,636.5;283.21,637.16;283.87,637.16;283.87,637.8199999999999;283.87,637.8199999999999;283.87,637.8199999999999;283.87,638.48;283.87,638.48;283.87,639.15;283.87,639.15;283.87,639.15;283.87,639.15;283.87,639.81;283.21,639.81;283.21,639.81;283.21,639.81;282.55,639.81;282.55,639.81;281.89,639.81;281.89,639.81;281.22,639.81;281.22,639.81;280.56,639.81;280.56,639.81;280.56,639.81;279.9,639.81;279.9,639.81;279.24,639.81;278.58,639.15;277.92,639.15;277.92,639.15;277.92,638.48;277.92,638.48;277.25,638.48;277.25,637.8199999999999;276.59,637.8199999999999;276.59,637.16;275.93,637.16;275.93,637.16;275.27,636.5;273.95,635.1800000000001;273.95,634.51;273.28,634.51;273.28,634.51;273.28,634.51;273.28,633.85;273.28,633.85;273.28,633.85;272.62,633.85;272.62,633.19;272.62,633.19;271.96,632.53;271.96,632.53;271.96,631.87;271.96,631.87;271.3,631.87;271.3,631.21;270.64,630.54;270.64,630.54;270.64,629.88;270.64,629.88;270.64,629.22;270.64,629.22;270.64,629.22;270.64,628.56;270.64,628.56;270.64,627.9;270.64,627.9;270.64,627.9;270.64,627.9;271.3,627.9;271.3,627.9;271.96,627.9;271.96,627.24;271.96,627.24;271.96,627.24;272.62,627.24;272.62,627.24;272.62,627.24;273.28,626.5699999999999;273.28,626.5699999999999;273.28,626.5699999999999;273.95,626.5699999999999;274.61,626.5699999999999;274.61,625.91;274.61,625.91;275.27,625.91;275.27,625.91;275.27,625.91;275.93,625.91;275.93,625.25;276.59,625.25;276.59,625.25;276.59,625.25;277.25,625.25;277.92,625.25;277.92,625.25;277.92,625.25;278.58,625.25;278.58,625.91;278.58,625.91;279.24,625.91;279.24,626.5699999999999;279.24,626.5699999999999;279.24,626.5699999999999;279.24,626.5699999999999;279.24,627.24;279.9,627.24;279.9,627.9;279.9,627.9;279.9,627.9;281.22,628.56</gesture>
        <gesture>290.49,649.0699999999999;290.49,648.41;290.49,648.41;290.49,648.41;290.49,647.75;290.49,647.75;290.49,647.09;289.83,647.09;289.83,646.4300000000001;289.83,646.4300000000001;289.83,646.4300000000001;289.83,645.76;289.83,645.76;289.83,645.1;289.83,645.1;289.83,644.44;289.16,643.78;289.16,643.12;289.16,642.45;289.16,642.45;289.16,641.79;289.16,641.79;289.16,641.13;288.5,637.8199999999999;288.5,637.8199999999999;288.5,637.8199999999999;288.5,637.16;288.5,637.16;288.5,636.5;288.5,636.5;288.5,636.5;288.5,635.84;288.5,635.1800000000001;288.5,635.1800000000001;288.5,634.51;288.5,634.51;288.5,633.85;288.5,633.19;288.5,633.19;287.84,632.53;287.84,632.53;287.84,631.87;287.84,630.54;287.84,630.54;287.84,630.54;287.84,629.88;287.84,629.88;287.84,629.22</gesture>
        <gesture>298.43,647.09;298.43,646.4300000000001;298.43,646.4300000000001;298.43,646.4300000000001;298.43,645.76;298.43,645.1;298.43,645.1;298.43,644.44;298.43,643.78;298.43,643.12;298.43,642.45;298.43,642.45;298.43,642.45;298.43,641.79;298.43,641.79;298.43,641.13;298.43,641.13;298.43,640.47;297.77,639.15;297.77,638.48;297.77,637.16;297.77,637.16;297.77,636.5;297.77,636.5;297.77,636.5;297.77,635.84;297.77,635.84;297.77,635.1800000000001;297.77,635.1800000000001;297.77,635.1800000000001;297.11,633.85;297.11,633.19;297.11,633.19;297.11,632.53;297.11,632.53;297.11,631.87;297.11,631.87;297.11,631.87;297.11,631.21;297.11,631.21;296.44,629.88;296.44,629.22;296.44,629.22;296.44,629.22;296.44,628.56;296.44,628.56;296.44,627.9;296.44,627.9;296.44,627.9;296.44,627.24;296.44,627.24;296.44,626.5699999999999;296.44,626.5699999999999</gesture>
        <gesture>308.35,636.5;308.35,636.5;307.69,636.5;307.69,636.5;307.03,636.5;307.03,636.5;306.37,636.5;305.71,636.5;305.71,636.5;305.05,636.5;305.05,636.5;305.05,636.5;305.05,636.5;305.05,635.84;304.38,635.84;304.38,635.84;303.72,635.1800000000001;303.72,635.1800000000001;303.72,634.51;303.06,633.85;303.06,633.85;303.06,633.85;303.06,633.85;302.4,633.19;302.4,633.19;302.4,632.53;302.4,632.53;302.4,631.87;302.4,631.87;301.74,631.21;301.74,631.21;301.74,630.54;301.74,630.54;301.74,630.54;301.74,630.54;301.74,629.88;301.08,629.22;301.08,629.22;301.08,629.22;301.08,628.56;301.08,628.56;301.08,627.9;301.08,627.9;301.08,627.9;301.74,627.9;301.74,627.24;301.74,627.24;301.74,627.24;302.4,626.5699999999999;302.4,626.5699999999999;302.4,626.5699999999999;302.4,626.5699999999999;302.4,626.5699999999999;303.06,626.5699999999999;303.06,626.5699999999999;303.72,626.5699999999999;303.72,625.91;303.72,625.91;303.72,625.91;304.38,625.91;304.38,625.91;305.05,625.91;305.05,625.91;305.05,625.91;305.71,625.91;305.71,625.91;306.37,625.91;306.37,625.91;307.03,625.91;307.03,626.5699999999999;307.69,626.5699999999999;309.02,626.5699999999999;309.02,626.5699999999999;309.68,627.24;309.68,627.24;309.68,627.9;310.34,627.9;310.34,627.9;310.34,627.9;311,627.9;311,627.9;311,627.9;311.66,629.22;311.66,629.22;312.32,629.22;312.32,629.88;312.32,629.88;312.32,630.54;312.32,630.54;312.32,630.54;312.32,630.54;312.32,631.21;312.32,631.21;312.32,631.87;312.32,632.53;312.32,633.19;312.32,633.19;312.32,633.85;312.32,633.85;312.32,633.85;312.32,633.85;312.32,634.51;312.32,635.1800000000001;311.66,635.1800000000001;311.66,635.1800000000001;311.66,635.84;311.66,635.84;311,636.5;311,636.5;311,637.16;311,637.16;311,637.16;310.34,637.16;310.34,637.8199999999999;310.34,637.8199999999999;309.68,637.8199999999999;309.68,637.8199999999999;309.68,637.8199999999999;309.68,637.16;309.02,637.16;309.02,637.16;309.02,637.16;308.35,637.16;308.35,637.16;308.35,636.5;307.69,636.5;307.69,636.5;307.03,636.5;307.03,636.5;306.37,636.5;306.37,636.5;306.37,636.5;305.71,636.5</gesture>
    </inklist>
</ink>

For the full list of properties, please visit the annotation's API docs.

The bottom-most point of the annotation. This property cannot be initialized through the initializer.

The left-most point of the annotation. This property cannot be initialized through the initializer.

The right-most point of the annotation. This property cannot be initialized through the initializer.

The top-most point of the annotation. This property cannot be initialized through the initializer.

Free hand annotations are made with multiple paths. The annotation provides a getPaths API that will provide an array of paths.

WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annotList = annotationManager.getAnnotationsList();
      annotList.forEach(annot => {
        if (annot instanceof Annotations.FreeHandAnnotation) {
          const paths = annot.getPaths();
          paths.forEach(path => {
            path.forEach(point => {
              // Work with points
            });
          });
        }
      });
    });
  });

To read a path and its points of a free hand annotation, you can use getPath to get an array of points. You will need to provide a path index, otherwise it will default to the first path.

WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annotList = annotationManager.getAnnotationsList();
      annotList.forEach(annot => {
        if (annot instanceof Annotations.FreeHandAnnotation) {
          // First stroke path
          const points = annot.getPath(0);
          points.forEach(point => {
            // Work with points
          });
        }
      });
    });
  });

If you have a path of points already, you can use setPath instead to set the path directly without adding them point by point.

When initializing a freehand annotation, you should use the addPathPoint API to add points to the annotation path. What makes this API different from other path type annotations is that it can take a third parameter that specifies which path to add the point. Default is the first path.

If you know which point and which path on the annotation path you would like to get, you can use getPathPoint with the point and path index to retrieve the point. If the path index is not provided, the first path will be used.

Setting the path points on the free hand annotation can be done through the setPathPoint. This can be used to initialize the points of a the annotation if that was not done at the start. Since free hand annotation contains multiple paths, a path index can be provided. If one was not provided, the first path will be used by default.

WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annotList = annotationManager.getAnnotationsList();
      annotList.forEach(annot => {
        if (annot instanceof Annotations.FreeHandAnnotation) {
          annot.setPathPoint(0, 50, 100, 0);
          annot.setPathPoint(0, 250, 150, 1);
        }
      });
    });
  });