Signature Pad
Canvas-based signature capture with mouse and touch support. Exports signature as base64 PNG to a hidden form input. Includes clear button and retina display support.
Preview & Code
_signature_pad.html.erb
███ ███████ ███████ ██████ ████ ███████ ████ ██████████ ██████████ ██████████ ██ ██████ ████ █████ ████ █████████ ██████ ██████████ ██
████ ███████████████████████████████
███████████████████████████████████████ █████████ ███
███████████████████████████████████████ █████████ ███
█████████████████████
██ ██ █████ ██
██████ ████████████ ███████ ███████████ ██████████████ ███████████████████ ██████
███ █████ █████ █ ██ ██ ████████ ██
████████
██ ███ ██
signature_pad_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ████████
██████ ██████ █ █
█████████ █ █████ ███████ ████████ █████████ ██
█████████ █ █████ ███████ ████████ █ █
█
█████████ █
signature_pad_component.html.erb
████ ███████████████████████████████
███████████████████████████████████████ ██████████ ███
███████████████████████████████████████ ██████████ ███
███████████████████ ███ ██████████████ ████
██ ██ ██████ ██
██████ ██████████ █████████████ ████
███ ██████ █████ █ ██ ██ █████████ ██
████████
██ ███ ██
████ ██████████ █████████████████ ████
signature_pad_component.rb
█ ██████████████████████ ████
█████ █████████████████████ █ ███████████████████
███ █████████████████ ██████ ████ ███████ ████ ██████████ ██████████ ██████████ ██ ██████ ████ █████ ████ █████████ ██████ ████████
█████ █ ████
██████ █ █████
███████ █ ██████
██████████ █ █████████
██████████ █ █████████
██████ █ █████
signature_pad_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ████████
██████ ██████ █ █
█████████ █ █████ ███████ ████████ █████████ ██
█████████ █ █████ ███████ ████████ █ █
█
█████████ █
Changelog
- Initial release with canvas drawing
- Mouse and touch input support
- Retina 2x display support
- Base64 PNG export to hidden input
- Clear button to reset signature
Get Full Access
Unlock the source code for this component and all others. One-time payment for lifetime access.
Get Access Now