HTML5 Signature Pad

 Signature Pad

Signature Pad is a jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration.  Here’s a demo.  And a nice video walk-through, Capture a Signature with jQuery and HTML 5.

This all looked great, and seems to be very nice, but it relies on FlashCanvas, which is an HTML5 Canvas for Internet Explorer via Flash.  This in turn relies on Flash which of course does not run on iPads, so its a non-starter.  Perhaps there’s a way to just use it directly with Canvas, but I didn’t look that closely.

Andrew Trice: Mobile Signature Capture

Next I found Andrew Trice’s Mobile Signature Capture Project (the JavaScript version) which is just a basic HTML5 Canvas signature capturing module.  It just captures the mouse or touch events, draws it on the canvas, and then can be saved as a .png file.  Here’s the demo.

It doesn’t save the strokes, like the one we developed for Windows CE, but its good enough for now.  I stripped out the Modernizr check to determine if it is a touch device and just used ‘ontouchstart’ in window to save some overhead, and I was in business.

This is also nicely written up in Capturing User Signatures in Mobile Applications.

 

Leave a Reply

Your email address will not be published. Required fields are marked *