Signature Signature Primer Tutorial

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_signature.html … calling on …
  2. external Javascript has a supervisory HTML and Javascript signature_signature.js containing the Canvas element mouse/touch event logics

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

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

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>