InkCanvas | Digital Signature Capture HTML Template

SignPad is a clean, professional digital signature pad template built with pure HTML5, CSS3, and Vanilla JavaScript — no jQuery, no dependencies, no server required. It provides a smooth pen-like drawing experience on both desktop and touch devices, with full control over ink colour and stroke thickness, stroke-by-stroke undo, and one-click PNG export. Open index.html directly in any browser and it works instantly.

Core Features: Smooth Pen-Like Drawing The signature canvas uses HTML5 Canvas with round line caps and joins to produce natural, fluid ink strokes on every device. The drawing engine stores each stroke as a lightweight vector path rather than a pixel snapshot, which keeps memory usage low and makes undo fast and accurate. Mouse and Touch Support Full support for mouse input on desktop and touch input on mobile and tablet. Touch scroll is blocked on the canvas during signing so the page does not accidentally scroll while the user is drawing. Works on Chrome, Firefox, Safari, Edge, and mobile browsers including iOS Safari and Android Chrome. Custom Ink Colours Five preset ink colour swatches are included — Midnight, Navy, Teal, Burgundy, and Forest. A full custom colour picker is also provided so the user can choose any colour they want. The active swatch is clearly highlighted and the colour picker stays in sync with the selected preset. Three Stroke Thickness Options Fine, Medium, and Bold thickness buttons let the user control how heavy the signature strokes appear. Each button shows a dot preview of its thickness so the choice is immediately clear. Stroke-by-Stroke Undo The Undo button removes the last drawn stroke and redraws the canvas from the remaining vector paths. This means undo is always precise and never affects other strokes. If all strokes are undone the canvas resets cleanly to its empty state. Clean PNG Export The Save PNG button exports the signature to a clean white-background PNG file named with the current date. The export uses the modern toBlob API with a fallback to toDataURL for older browsers, making the download work correctly across Chrome, Firefox, Safari desktop, and older Android WebViews. iOS Safari opens the image in a new tab where the user can long-press to save. Live Status Badge A small status badge in the toolbar shows Ready, Signing, or Signed in real time so the user always knows the current state of the pad. Toast Notifications Non-intrusive toast messages confirm actions such as stroke undone, canvas cleared, and signature saved without using browser alerts or interrupting the workflow. High DPI and Retina Display Support The canvas is sized using devicePixelRatio so signatures look sharp on retina and HiDPI displays. The context transform is applied correctly so all drawing coordinates use logical CSS pixels regardless of the screen density. Fully Responsive Layout The signature pad adapts cleanly to any screen size. The layout is built with CSS3 flexbox and works correctly on mobile, tablet, and desktop without any configuration.