Signature Signature Primer Tutorial

☞

Signature Signature Primer Tutorial

Today’s new web application is a Signature Signature. Our aim with this web application is …

• capture a person’s signature (via an HTML(5) Canvas element) … and be …
• collecting that Signature’s “Signature” in terms of a pen plotter pen up/pen down instructional “definition” (in some way shape or form) … if the user is satisfied to …
• save the Signature’s “Signature” in a HTTP Cookie that can be remembered by this and other web applications, perhaps … we’ll see on this one

If you’re a programmer reading above, am sure you are immediately curious about …

• cross-platform and cross-browser issues within the touch/mouse worlds … you are not alone …
• can a complicated signature be saved within the storage restrictions of HTTP Cookies? … the room is getting more crowded …
• cropping and initial canvas size concepts … take a ticket …
• how do you handle scaling and the implications to authenticity (of scaling) if you reuse this Signature’s “Signature” in another context … think there’s room there squeezed up against the fridge
• astronauts in zero gravity? … alright already!

… but, nevertheless, let’s just creep up on the project, and see how we go, here, today, on a first draft.

Concentrating in on the HTML(5) Canvas element thoughts, what events will be of interest?

• mouse move event “onmousemove” (and its equivalent touch event(s)) … for sure, and others, perhaps like …
• mouse up “onmouseup” (like pen up) (and its equivalent touch event(s))
• mouse down “onmousedown” (like pen down) (and its equivalent touch event(s))

This “events” concern we have, above, had a similar scenario to when we presented Canvas Email Attachment Scribble Tutorial, and so, with that in mind, we are going to have a web application that …

1. has a supervisory HTML and Javascript signature_signaturehtml … calling on …
2. external Javascript has a supervisory HTML and Javascript signature_signaturejs containing the Canvas element mouse/touch event logics

Here is a liverun link, and to see this in action, take a skeg at …

If this was interesting you may be interested in this too.