HTML5 canvas field for payment signature

I've been working on this for future use in the UberPOS project. Basically just capturing a signed canvas and saving the data URL. I'll post some code here when I can.

rbayliss .. would love to see your code

Here's the proof of concept I did as a CCK field for D6. It saves the canvas by converting it to a data URL and sending via ajax post. This definitely needs some work, but it's something to start with. Touch commands work with this implementation, at least on the iPhone. I've played with a full-screen modal popup for the capture (mostly useful for mobile devices), but it seems too slow. Maybe someone who has more javascript skills can help out.

rbayliss, I tested the signature module. Is pretty nice. It also works pretty well out of the box. I didn't have to do a single thing to get it working. What are you thinking of doing with it? Is pretty sweet. It's definitely missing features but is a great start.

Short term, I'm hoping to get this into UberPOS for paperless POS transactions, but I'm thinking a more generic and feature-rich version could handle a lot more than just signatures. I'm not sure whether this would be more useful as it's own module or as part of HTML5 tools. Any suggestions?

@skyredwang that sounds like a pretty good idea.

OK, here's a placeholder page.

Can we come up with some possible use cases for this module beyond signature capture? One that jumps to mind is annotating screenshots/images something like http://www.panic.com/blog/2010/06/coda-notes-previe/ It is possible to put an image on the canvas and allow drawing over it. Any other ideas before I start writing some serious javascript?

I don't think the module should handle graphing/data visualization, but focus on capturing input (it is a field after all).

#4 did not work for me in a pretty vanilla D6.19 install.

Other notes:
-Would _love_ the ability to upload / annotate built into this field
-Not sure the save location should be relative to Drupal codebase root... rather, should it be relative to site's defined filesystem?

Eagerly awaiting more development on this! I've been interested in something like this for a long time, so our designers can pencil in quick mockups in our project mgmt system...

Subscribing.

I have to say simply the signature capturing is really useful in its own way, and for users without much coding exp ( or drupal exp) I feel that a signature module and other canvas modules ( say a drawing module for instance ) should be kept as separate things, unless very very easy to do....

I'm moving the issue over to the actual canvas_field module. It makes more sense over there.

As for a use-case... I'm actually using it right now on a project completion site as a "Quick Sketch" so if you have an idea, you can sketch it out before you forget it. I would love some more options, like the ability to clear the canvas, undo and redo, change colors, erase, change pen size, etc. But on another note, the simplicity of it is what makes it perfect for me. I'll throw a link up as soon as it's ready to use.

Here's a screenshot anyway.

edit:link expired
http://awesomescreenshot.com/04a2vwz2e

Great to hear someone is making use of this module already. Check out the D7 release for the ability to clear the canvas. Other features coming soon.

Yeah it was a toss-up whether I should start the whole project on D6, or D7.

Here's the work in progress: http://drewscube.com

I just installed the D6 Dev version and it kicks but, exactly what I've been looking for. Super simple, very easy to use.

$1M thanks.

This post is a bit old, but the front page said to post ideas here.
I am using D6 and want to include different brushes and tools for more creative drawing.

Examples: http://mrdoob.com/projects/harmony/, http://caimansys.com/painter/, and http://www.williammalone.com/articles/create-html5-canvas-javascript-dra...

I saw that new features are for D7 only, but I would like to help develop the D6 version further or build something similar.

Hey Mattwad,
The ability to have tools has been implemented in the D7 version. As you mentioned, I'm not really focusing on the D6 version right now, but if you'd like to provide a patch porting any of the new stuff back, I'd be happy to put it into the 6.x branch. Once the ability to have tools is in both branches, there's no reason a tool written for D6 couldn't work for D7 or vice versa. I'd definitely say let's not create another module -- it seems like this is a pretty niche need, and it would be best to focus efforts in a single place.

Wondering if this could be incorporated with http://www.openprocessing.org/visuals/?visualID=8168 ? To get some of those sweet brush styles Mr Doob and others have got going.

Oh and, sweet module. Cheers

Wondering if anyone can add other functionality to the field such as drag and drop and resize along with Draw.

Detailed description of what I need:
On the right side there will be a list of all the images I have uploaded into the content type products.
On the left side there will be a canvas.
I should be able to drag the images and drop it into my canvas.
I should be able to drop multiple images.
Additional feartures with the image like resize, rotate, flip, flop, remove etc
Save the creation
Edit the creation

Can anyone please help me building this.