Signature Pad - Draw & Download Signature

How to use this tool

1. Draw your signature on the canvas using a mouse or touch.
2. Adjust stroke color and width using the controls below.
3. Click "Download PNG" or "Download SVG" to save.

How to use

Draw your signature on the canvas using your mouse, trackpad, or a touchscreen stylus. The stroke color and width controls apply to each new stroke. Use Undo to remove the last completed stroke or Clear to erase the whole canvas. When you are ready, choose Download PNG for a transparent image or Download SVG for a path-based vector file.

Export formats

This pad offers two downloads: a transparent PNG and an SVG made from the drawn paths. The PNG keeps the canvas's transparent background; the white panel around the drawing is part of the page, not the exported image. There is no white-background export or JPG option. Both downloads use the complete 600 × 220 canvas, including empty space around the signature, so you can crop the image after downloading if you want tighter margins.

• Transparent PNG: convenient for placing the signature over a document, image, or email footer without covering its background.
• SVG paths: useful in vector-aware editors and can be scaled without the pixelation of a raster image. The paths still follow the straight segments recorded while drawing.

Privacy

Your signature is drawn and processed entirely in your browser using the HTML5 Canvas API. No image data is uploaded to any server. Your signature exists only in your browser session.

Legal note

This tool creates a digital image of a handwritten-style signature. For legally-binding electronic signatures on contracts and documents, use a certified eSignature service that provides audit trails and legal compliance (e-SIGN Act, ESIGN, eIDAS).

How strokes are drawn

This pad connects the mouse or touch points it receives with straight line segments. Canvas round caps and joins soften the ends and corners, but the tool does not interpolate Bézier curves or vary line width according to pressure or drawing speed. Each stroke uses the color and width selected when that stroke begins. If a line looks angular, drawing more slowly and steadily can give the browser more points to connect; the SVG download represents those same points as path segments.

DPI and print quality

The pad exports a fixed 600 × 220 px canvas; it has no scale or resolution selector. At 300 DPI, 600 pixels span 2 inches, or about 50.8 mm. If you place the PNG 3 inches wide, its effective resolution is 200 DPI (600 pixels ÷ 3 inches); making it larger reduces effective DPI and does not add detail. For a larger print size, use the SVG in a vector-aware document editor when your workflow supports it, or resample the PNG with an editor while understanding that resampling cannot recover detail that was not captured.

For screen use such as an email footer or digital document, a 200–300 px-wide display is often enough. The transparent PNG can be inserted into a document editor and resized there; check the result at the intended display size before using it.

Embedding in a PDF or document

• Microsoft Word: Insert -> Pictures -> insert the downloaded PNG. Resize as needed.
• Adobe Acrobat: use the Fill & Sign tool to place the signature image on the PDF.
• macOS Preview: open the PDF, click the Markup Toolbar's signature button, or use the image toolbar to drag and drop the PNG.
• Online tools: Smallpdf, PDF.co, and DocHub can place image signatures on PDFs without installing software.