Free Online Text to Handwriting Converter

This application provides a professional, browser-based solution for converting standard digital text into realistic, handwritten-style imagery. It is designed for students, educators, and designers who need a quick way to create authentic-looking handwritten notes without the need for specialized hardware.

Core Feature List

• Live Canvas Rendering: Real-time generation of handwritten text on an HTML5 canvas element.
• Font Customization: Access to a curated selection of Google Fonts (e.g., Dancing Script, Indie Flower, Caveat) to simulate different handwriting styles.
• Visual Adjustments:
  • Text size and line height sliders.
  • Letter spacing adjustment to simulate natural flow.
  • Ink color picker (pre-set options for blue, black, and red ink).
• Paper Styles: Toggle between plain, lined, and grid paper backgrounds.
• Humanization Effect: A randomization algorithm that applies slight variations in character rotation and vertical jitter to simulate human imperfection.
• Export Utility: A "Download as PNG" feature that uses the toDataURL method to output the canvas content as a local file.

UI/UX Design Specification

• Layout Structure:
  • Top Navigation: Contains the tool title and the primary "Download Image" button.
  • Control Sidebar: A clean, fixed-width sidebar (left or top on mobile) containing all dropdowns, sliders, and color inputs.
  • Main Preview Area: A centered, responsive canvas container with a soft drop shadow, mimicking a physical piece of paper.
• Aesthetic Guidelines:
  • Palette: Crisp #FFFFFF backgrounds for the UI, soft #F8FAFC for the app background, and slate grey (#334155) for typography.
  • Elements: Minimalist, high-contrast borders and subtle shadows (box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)).
  • Responsiveness: Uses flexbox and media queries to shift the control sidebar to a top-aligned bar on devices narrower than 768px.

Interactions & Animations

• Smooth Transitions: Use CSS transition properties for all input changes (hover states, focus borders).
• Canvas Updating: Debounced rendering (approx. 300ms) to ensure the UI remains responsive during typing.
• Button Interactions: Scale-down feedback (transform: scale(0.98)) on clicks to provide tangible user feedback.

Technical Constraints & Compliance

• Single-File Architecture: All HTML, CSS, and Vanilla JavaScript must be contained within a single <file>.html document.
• No LocalStorage: As this application runs in a sandboxed iframe, all state must be handled in memory (JS variables). No settings should be saved between reloads.
• No External Alerts: Do not use alert(), confirm(), or prompt(). All notifications (e.g., "Download started") must be custom-built DOM elements (toast notifications).
• CDN Usage: External CSS/Fonts (Google Fonts, Tailwind CSS via CDN) are permitted.
• No Frameworks: Build using vanilla JavaScript to ensure maximum performance and minimal overhead.
• Security: Ensure all external download links include rel="noopener noreferrer".