Docify

By Docify

Stamp a Drawn Signature on Page 1 of a PDF

• 5 min read

To add a signature to a PDF in Docify, pick a local application/pdf file, draw on the 500×200 canvas, then click Sign and download. The pad is captured with canvas.toDataURL() (default PNG), embedded via pdf-lib embedPng, and drawn on getPages()[0] at x: 50, y: 50 (150×50 pt). The download is signed-document.pdf. Nothing is uploaded.

Signing is a button, not a live stamp as you draw. The PDF signer does not type a name, accept a signature image, or let you drag the PNG. For why this is not ESIGN / eIDAS e-sign, see visual stamp vs electronic signature. For PKCS#7 / PAdES and the mouse-only pad, see not a digital certificate signature.

How Sign and download places the PNG

  1. Upload PDF keeps files whose type is application/pdf. Anything else is rejected with alert(). Preview is an iframe pointed at URL.createObjectURL.
  2. The pad is a 500×200 canvas. The 2d context uses black stroke, line width 2, and round caps. Mouse down/move/up map through getBoundingClientRect. Mouseup (and mouseleave) store canvas.toDataURL().
  3. Sign and download reads the file with arrayBuffer() and PDFDocument.load. Only getPages()[0] is used. The data URL is fetched to bytes and embedded with embedPng.
  4. drawImage places the PNG at x: 50, y: 50 with width 150 and height 50 (PDF user space; origin at the bottom left). pdfDoc.save() becomes an application/pdf download named signed-document.pdf. Errors surface with alert().

What this page does not do

  • It does not let you position the stamp, sign page 2+, or upload a signature image. The old “place it anywhere” step was not about this tool.
  • It does not stamp as you draw. You click Sign and download after both the PDF and the data URL exist.
  • It does not claim a legally binding electronic signature. The stamp is a picture on page 1.

Stamp a local PDF

Draw on the canvas, click Sign and download, save signed-document.pdf. No upload.

Use PDF Signer →

FAQ

Does adding a signature upload my PDF?
No. The picker reads an application/pdf file, preview uses a local object URL, and pdf-lib loads arrayBuffer() in the browser. The page does not send the PDF or the canvas PNG to a server.
Does Sign and download run when I pick a file?
No. Choosing a PDF only sets the iframe preview. You still draw on the canvas (mouseup stores canvas.toDataURL()) and click Sign and download. The button stays disabled until both a PDF and a stored data URL exist.
Can I type my name or upload a signature image?
No. The only pad is a 500×200 canvas with a 2d context (black stroke, width 2, round caps). There is no typed-name field and no signature-image picker. The old “draw, type, or upload” step was not about this page.
Where does the stamp appear?
Only on getPages()[0]. pdf-lib drawImage places the PNG at x: 50, y: 50 (user space, origin bottom-left) with width 150 and height 50. You cannot drag the stamp or pick another page.

Related

← Back to all articles | Explore all tools →