PDF Sign — Add Signature to PDF Online

This tool adds electronic signatures to PDF documents by embedding a signature image directly onto the specified page. It uses two complementary libraries: pdfjs-dist renders the page as a visual preview for accurate placement, while pdf-lib handles the actual embedding of the signature image into the PDF structure.

Electronic signatures vs. digital signatures

Electronic signatures and digital signatures are distinct concepts in document authentication. An electronic signature is any visual mark placed on a document to indicate agreement — a handwritten image, a typed name in cursive, or a scanned ink signature. A digital signature, by contrast, is a cryptographic operation that uses public key infrastructure (PKI) and X.509 certificates to create a tamper-evident seal on the document. This tool creates electronic signatures. Under the US ESIGN Act (2000) and the EU eIDAS Regulation (2014), electronic signatures carry legal weight for most commercial and personal transactions, including contracts, agreements, and approvals. Advanced and qualified electronic signatures (which require PKI) are necessary only for specific regulated contexts such as court filings, certain government forms, and pharmaceutical compliance documents.

How PNG embedding works in pdf-lib

The signature is rendered on an HTML5 Canvas element and exported as a PNG data URL via canvas.toDataURL('image/png'). The tool strips the Base64 prefix, decodes the string into raw bytes, and passes them to PDFDocument.embedPng(). This method parses the PNG structure (IHDR, IDAT, IEND chunks), decompresses the pixel data, and stores it as an XObject image stream inside the PDF. The embedded image is then drawn onto the page via page.drawImage() with explicit x, y, width, and height parameters measured in PDF points (1 point = 1/72 inch).

PDF coordinate system and y-axis conversion

PDF uses a bottom-left origin coordinate system where Y increases upward, while CSS and HTML Canvas use a top-left origin where Y increases downward. When you click on the page preview to place a signature, the tool records the click position in CSS coordinates (top-left origin). Before drawing the image with pdf-lib, it converts: pdfY = pageHeight - cssY - signatureHeight. A standard A4 page measures 595 × 842 points. This coordinate mapping ensures the signature appears at exactly the position you clicked on the preview, regardless of page size or orientation.

Canvas-based freehand drawing

The Draw tab uses the HTML5 Canvas API with willReadFrequently: true to optimize for frequent pixel reads. Drawing tracks pointer events (mousedown, mousemove, mouseup) and equivalent touch events for mobile devices. Each stroke is rendered as a path with ctx.lineTo() and round line caps for smooth curves. The canvas operates on a transparent background, so the resulting PNG preserves transparency when placed over PDF content. This approach avoids external libraries like signature_pad, keeping the bundle small and dependency-free.

Security and privacy considerations

All processing happens client-side in your browser. Neither the PDF nor your signature image is transmitted over the network. This makes the tool suitable for signing contracts, NDAs, rental agreements, and other sensitive documents. For documents requiring cryptographic non-repudiation, pair the signed PDF with a tool like Digital Signature Validator. For adding text overlays instead of signatures, try PDF Add Watermark or PDF Add Stamps. To fill form fields in a PDF, use PDF Form Filler.

Adding signatures to PDFs is one of the most common document workflows. Here are key scenarios where this tool helps:

• Contracts and agreements — Employment contracts, freelance agreements, and vendor contracts frequently arrive as PDFs requiring a signature. This tool lets you sign instantly without printing, scanning, or creating accounts on third-party platforms like DocuSign or Adobe Sign.
• Rental and lease documents — Landlords and property managers often send lease agreements as PDFs. Tenants can sign directly in their browser, preserving both the document integrity and their privacy — the PDF never leaves the device.
• School and government forms — Permission slips, tax forms, and administrative documents frequently require a signature. The Draw tab works well on tablets and touchscreens, making it practical for on-the-go signing.
• Internal approvals — Purchase orders, expense reports, and project sign-offs in corporate environments benefit from electronic signatures. The locally-processed approach ensures confidential financial data remains within the organization.
• Legal declarations and affidavits — While court filings may require qualified digital signatures, many legal declarations accept electronic signatures under ESIGN and UETA frameworks. This tool provides a quick way to add a visible signature before notarization or witness attestation.
• Creative and freelance work — Photographers, designers, and consultants regularly sign model releases, licensing agreements, and invoices. The Type tab offers a quick professional-looking signature without needing to draw.

Processing PDFs locally in your browser eliminates the privacy risks of uploading sensitive documents to cloud-based signature services. Your document, your signature, and the signed result all remain on your device throughout the entire workflow. For related PDF operations, explore PDF Add Page Numbers and PDF Compress.