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 thisif 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.