test.js

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);
    });
}