Recording and storing high-res hand drawing

Question

Are there any advanced solutions for capturing a hand drawing (from a tablet, touch screen or iPad like device) on a web site in JavaScript, and storing it on server side?

Essentially, this would be a simple mouse drawing canvas with the specialty that its resolution (i.e. the number of mouse movements it catches per second) needs to be very high, otherwise round lines in the drawing will become "polygonal" when moving the pen / mouse fast:

(if this weren't the case, the inputDraw solution suggested by @Gregory would be 100% perfect.)

It would also have to have a high level of graphical quality, i.e. antialias the penstroke. Nothing fancy here but a MS Paint style, 1x1 Pixel stroke won't cut it.

I find this a very interesting thing in general, seeing as Tablet PCs are becoming at least a bit more common. (Not that they get the attention I feel they deserve).

Any suggestions are highly appreciated. I would prefer an Open Source solution, but I am also open to proprietary solutions like ActiveX controls or Java Applets.

FF4, Chrome support is a must; Opera, IE8/9 support is desired.

Please note that most "canvas" libraries around, and most answers to other questions similar to mine, refer to programmatically drawing onto a canvas. This is not what I am looking for. I am looking for something that records the actual pen or mouse movements of the user drawing on a certain area.

Starting a bounty out of curiosity whether anything has changed during the time since this question was asked.

Beslobber

The stylus pressure sensitive API is not there yet. I bet it will within in a half a year. – Marolda

Yes, there will probably be something sooner or later. It doesn't need to be pressure sensitive for my purposes, though. Clean tracking and a nice stroke is enough. – Beslobber

Answer 1

I doubt you'll get anything higher resolution than the "onmousemove" event gives you, without writing an efficient assembler program on some embedded system custom built for the purpose. You run inside an OS, you play by the OS's rules, which means you're limited by the frequency of the timeslices an OS will give you. (usually about 100 per second, fluxuating depending on load) I've not used a tablet that can overcome the "polygon" problem, and I've used some high end tablets. Photoshop overcomes the problem with cubic interpolation.

That is, unless, you have a very special tablet that will capture many movement events and queue them up to some internal buffer, and send a whole packet of coordinates at a time when it dispatches data to the OS. I've looked at tablet api's though, and they only give one set of coordinates at a time, so if this is going to happen, you'll need custom hardware, and a custom driver, and custom apis that can handle packets of multiple coordinates.

Or you could just use a damned canvas tag, the onmousemove event, event.pageX|pageY some cubic interpolation, the "toDataURI" api of canvas, post the result to your php script, and then just say you did all that other fancy stuff.

onmousemove, in my tests, will give you one event per pixel of movement, limited only by the speed of the event loop in the browser. You'll get sparse data points (polygons) with fast movement and that's as good as it gets without a huge research grant and a hardware designer. Deal.

Incantatory

Thanks for the background information. I didn't know about how photoshop does it, very interesting. I have found some solutions in the other questions that look promising to me and seem to provide appropriate update frequency to me (I haven't had the time to test them yet with a tablet, though). – Beslobber

@Pekka: I don't know about interpolation, but what Photoshop does is it queues up the mouse positions, drawing them when it gets the chance. If you get a new mouse position only once you've drawn the last one, you get polygons instead of curves. – Spoor

Answer 2

there are some applets for this in the oekaki world: Shi painter, Chibipaint or PaintBBS. Here you have php classes for integration.

Drawings produced by these applets can have quite good quality. If you register in oekakicentral.com you can see all the galleries and some drawings have an animation link that shows how was it drawn (it depends on the applet), so you can compare the possibilities of the applets. Some of them are open source.

Edit: See also this made in HTML 5.

Buzzell

Answer 3

Have a look at <InputDraw/>: a flash component that turns freehand drawing into SVG. Then you could send back the generated SVG to your server.

It's free for non commercial use. According to their site, commercial use price is 29€. It's not open source though.

IMHO it's worth a look.

Alternatively, you implement something based on svg-edit which is open source and uses jQuery (demo). If requires the Google Frame Plugin for IE6+ support though.

EDIT: I just found the svg-freehand-signature project (demo) that captures your handwritten signature and sends it to a server as a SVG using POST. It's distributed as a straight-forward and self-contained zip (works out of the box with Safari and Firefox, you may want to combine it with svgweb that brings SVG support to Internet Explorer).

EDIT: I successfully combined Cesar Oliveira's canvaslol (just look at the source of the page to see how it works) with ExplorerCanvas to have something on IE. You can also have a look at Anne van Kesteren's Paintr experiment.

Bonnette

The "turn drawings to SVG" angle is very interesting, and especially svg-freehand-signature looks great and is fast enough. For the purposes of this bounty, I am going to go with nacmartin's oekaki suggestions as the project in question is mainly about painting, and those editors promise a ton of different strokes, textures and the like. Still - great and useful links, thanks! – Beslobber

Well... it's your call anyway. Imho Oekaki and Java applets are so 1999... the user experience will never be as smooth as with Javascript or eventually flash. The main advantage of SVG is that you get something meaningful to work with afterwards, not just an image. – Bonnette

Answer 4

markup.io is doing that with an algorithm applied after the mouseup.

I asked a similar question recently, and got interesting but not satisfying answers: Is there any way to accelerate the mousemove event?

Flossieflossy

Many software uses smoothing when drawing SVG lines. Sometimes it's very subtle, other times very aggressive. – Overall