To capture a signer's graphic signature, a signature soft pad is included with the Document Viewer. During the signing process, this captured signature image is applied to the signature field.

Live Demo

We have released a live demo that shows this functionality in action, including a replay of the signature and the extraction of the SVG image of the signature.

Raw Signature Data Live Demo

After the user signs the document, the electronic signature is attached to the document and forwarded to the specified URL, along with the signature data such as the signature image and timestamp information.

SignatureData Object

During the e-signing process, the document is encrypted and digitally signed and is therefore tamper-proof. Additional features, such as storing the raw signature data, including point positions, velocity, and acceleration, can enhance the evidence.

Learn More

Capturing electronic signatures and signing signature fields with certificates is a common feature of the TX Text Control Document Viewer. The most common server-side Web API methods for handling electronic signatures are described in this article.

Common Web API Methods for Handling E-Signature Workflows in ASP.NET Core C#

SignaturePoint Array

Since version 32.0.2 of the Document Viewer, the SignatureData contains the raw signature data. The location of each captured signature point and a timestamp are stored in the SignaturePoint class.

public class SignaturePoint
{
   public float X { get; set; }
   public float Y { get; set; }
   public long CreationTimeStamp { get; set; }
}

The signature obtained above would produce the following (truncated) results when converted to JSON.

[
  [
    {
      "x":160.5,
      "y":40.28125,
      "creationTimeStamp":1697612284193
    },
    {
      "x":161.5,
      "y":54.28125,
      "creationTimeStamp":1697612284209
    },
    {
      "x":164.5,
      "y":59.28125,
      "creationTimeStamp":1697612284226
    }
  ],
  [
    {
      "x":129.5,
      "y":37.28125,
      "creationTimeStamp":1697612284726
    },
    {
      "x":133.5,
      "y":37.28125,
      "creationTimeStamp":1697612284743
    }
  ],
  [
    {
      "x":198.5,
      "y":21.28125,
      "creationTimeStamp":1697612285209
    },
    {
      "x":192.5,
      "y":24.28125,
      "creationTimeStamp":1697612285226
    },
    {
      "x":182.5,
      "y":37.28125,
      "creationTimeStamp":1697612285243
    }
  ],
  [
    
  ],
  [
    {
      "x":300.5,
      "y":27.28125,
      "creationTimeStamp":1697612286343
    }
  ]
]

Replay the Signature

The signature data contains 5 segments, one for each drawing action when the pen is repositioned. The following JavaScript function can be used to replay all segments of the JSON.

async function handleSignature(lines) {
    const canvas = document.getElementById("signature");
    const ctx = canvas.getContext("2d");
    const signature = JSON.parse(lines);

    ctx.beginPath();
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 5;

    for (let segment = 0; segment < signature.length; segment++) {
        for (let i = 0; i < signature[segment].length; i++) {
            const { x, y, creationTimeStamp } = signature[segment][i];

            if (i === 0) {
                ctx.moveTo(x, y);
            } else {
                // calculate the duration between the current and the previous line
                const duration = creationTimeStamp - signature[segment][i - 1].creationTimeStamp;
                await drawLine(ctx, x, y, duration);
                ctx.stroke(); // stroke the line
            }
        }
    }
   
}

// draw a line with a delay
function drawLine(ctx, x, y, duration) {
    return new Promise((resolve) => {
        setTimeout(() => {
            ctx.lineTo(x, y);
            resolve();
        }, duration);
    });
}

The above signature would look like the one shown in the following screen video.

Storing the Signature Data

Similar to the signature data returned by a hardware signature pad, the returned values can be stored in a database of your implemented application that captures signatures. In addition, this data or a hash can be attached to the PDF, which is then encrypted when the document is digitally signed. When a document is validated, the hash in the document is compared to the stored signature data in the database. If they match, there is a high probability that the document has not been tampered with.

You can download a sample application from our GitHub repository to test this yourself.