SignPad is a browser-based signature tool built with HTML, CSS, and JavaScript. It lets users draw, customise, and export their handwritten signature as a PNG image directly inside the browser — with nothing uploaded and nothing stored on any server.
The interface is built around a drawing canvas with adjustable stroke thickness and ink colour. Controls are grouped into a clean toolbar below the canvas: thickness selector, colour swatches, undo, clear, and save. A live status indicator shows whether the canvas is blank or has content, and toast notifications confirm every action.
SignPad works on both desktop and mobile. Mouse and touch input are fully supported. No installation is required beyond dropping the folder into a local web server (XAMPP or WAMP) and opening index.html in a browser.
Key Features:
- HTML5 Canvas drawing with smooth round line caps and joins
- Three stroke thickness options: Fine (1px), Medium (2px), Bold (4px)
- Four curated ink colour presets: Midnight, Navy, Burgundy, Forest
- Custom colour picker for any ink colour
- Undo — removes the last stroke, supports multiple undos
- Clear — wipes the canvas and resets everything instantly
- Save as PNG — exports a full-resolution signature.png to your device
- Live status indicator — grey when blank, green when signed
- Hint overlay — "Start signing here" fades in/out automatically
- Toast notifications after every action (Undo, Clear, Save)
- Full touch support (touchstart, touchmove, touchend)
- 100% Responsive and Mobile-Friendly layout
- Privacy-first — no data ever sent to a server
- Cross-browser compatible (Chrome, Firefox, Safari, Edge)
- Lightweight — no frameworks, no build tools required
- Properly DocumentedNote:
No backend or PHP script is required. SignPad runs entirely in the browser using HTML5, CSS3, and JavaScript. Simply place the folder in your local web server root (XAMPP/WAMP) and open index.html — or double-click index.html to run it directly without a server.
Hello there, If you have any questions about SignPad or need help customising it for your project, feel free to reach out — I would be happy to help. Thank you, and I hope to hear from you soon.
