Free Online Digital Signature Maker & PNG Creator

Technical Specification: Browser-Based Digital Signature Tool

This application is a lightweight, single-file HTML5 utility designed to enable users to create, preview, and export custom handwritten signatures. It relies entirely on client-side JavaScript and the HTML5 Canvas API.

Core Features

• Responsive Canvas Drawing: A drawing area that adjusts its internal coordinate system to match display dimensions, supporting both mouse (desktop) and touch (mobile/tablet) inputs.
• Dynamic Pen Customization: Users can adjust the stroke width (1px to 10px) and select from a defined color palette (Black, Dark Blue, Red).
• High-Resolution Export: Export the canvas contents directly as a transparent PNG file using the toDataURL('image/png') method.
• Reset Capability: A clear function to instantly wipe the canvas for retry.
• Zero External Dependencies: Must be written in vanilla HTML, CSS, and JavaScript. No libraries (like jQuery or React) are permitted.

User Interface Layout

• Header: Simple, text-based branding indicating the tool's utility (e.g., "Digital Signature Maker").
• Main Canvas Area: The primary interactive element, centered on the page with a light-gray dashed border to clearly define the drawing boundary.
• Control Panel: A horizontal toolbar positioned immediately below the canvas containing:
  • Pen width slider.
  • Color selector (radio buttons or styled divs).
  • "Clear" button (secondary style).
  • "Download PNG" button (primary, high-contrast style).
• Constraints: No footer allowed. No dark mode implementation is allowed; the aesthetic must be a bright, professional, high-contrast light mode with whitespace.

Design Aesthetics

• Color Palette: A clean, professional "Light Mode" aesthetic. White background (#FFFFFF), dark grey text (#333333) for readability, and a subtle blue or grey for interactive buttons.
• Micro-interactions: Smooth transitions on button hover states and subtle feedback when the drawing surface is active.

Technical Requirements

• Self-Contained: The entire application (HTML, CSS, and JS) must reside in a single file.
• Responsiveness: The canvas must recalculate its size upon window resizing and handle touch events gracefully to prevent page scrolling while drawing.
• Sandbox Ready: The code must be compatible with execution inside a sandboxed iframe without requiring external fonts, external stylesheets, or network access.
• Export: Must correctly handle alpha transparency during the PNG export process to ensure compatibility with document editors.