Javascript – How to add a signature to a pdf document in a specific place using forms in html, css, js

i tried using jsPdf, signature pad but all i could do is add the signature to a pdf created using forms but i couldn’t put the signature in the desired place.

i need a solution for this
if I input a PDF that has a written place for e-signature, how to put it in the desired place?
here’s the sample pdf pdf-link

<script>
    import { onMount } from 'svelte';
    import SignaturePad from 'signature_pad';
    import html2canvas from 'html2canvas';
    import jsPDF from 'jspdf';

    let signaturePad;
    let canvasImg = '';

    onMount(() => {
        const canvas = document.getElementById('signatureCanvas');
        signaturePad = new SignaturePad(canvas);
        const generatePDF = async () => {
            const downloadButton = document.getElementById('downloadButton');
            downloadButton.innerHTML = 'Currently downloading, please wait';

            //Downloading
            const whatToPrint = document.getElementById('whatToPrint');
            const doc = new jsPDF('l', 'pt');

            await html2canvas(whatToPrint, {
                width: 530
            }).then((canvas) => {
                //Canvas (convert to PNG)
                doc.addImage(canvas.toDataURL('image/png'), 'PNG', 5, 5, canvas.width, canvas.height);
            });

            doc.save('Document.pdf');

            //End of downloading

            downloadButton.innerHTML = 'Click to download';
        };

        window.generatePDF = generatePDF;
    });
    function clearSignature() {
        signaturePad.clear();
    }

    function saveSignature() {
        const signatureData = signaturePad.toDataURL(); // signature as base64 data URL
        console.log(signatureData);
    }
    function saveSignatureImg() {
        const signatureData = signaturePad.toDataURL('image/png'); //  signature as image data URL
        canvasImg = signatureData;
    }
</script>

<div id="" style="width: 500px; padding: 10px; background-color: antiquewhite; margin:0 auto;">
    <h1>Sample form with signature</h1>
    <div class="form" id="whatToPrint">
        <form action="">
            <label for="h">firstname</label>
            <input id="h " type="text" />
            <label for="h">lastname</label>
            <input id="h " type="text" />
            <label for="h">age</label>
            <input id="h " type="number" />
            <label for="h">Salary</label>
            <input id="h " type="number" />
            <label for="h">School/University</label>
            <input id="h " type="text" />

            {#if canvasImg}
                <img id="signatureCanvas" src={canvasImg} alt="canvasImg" />
            {/if}
            <label for="h">....................</label>
            <label for="h">signature</label>
        </form>
    </div>
    <section class="container">
        <canvas id="signatureCanvas" width="400" height="200"></canvas>

        <div>
            <button on:click={clearSignature}>Clear</button>
            <button on:click={saveSignatureImg}>Save As Img</button>
            <button on:click={saveSignature}>Save</button>
        </div>
    </section>
    <a href="javascript:generatePDF()" id="downloadButton">Click to download</a>
</div>

<style>
    .form {
        background-color: pink;
    }
    .form form {
        display: flex;
        flex-direction: column;
        background-color: antiquewhite;
    }
    #signatureCanvas {
        margin-top: 15px;
        border: 1px solid #000;
        width: 100%;
        max-width: 400px;
        height: 200px;
    }
</style>

signature has to be put on the specific place on pdf by signing on the webpage.any package is welcome.