Searching for Signal

the n01se blog

Weekend hack: multitouch drawing on iPhone

I played around with the multitouch browser API and the HTML5 canvas tag this weekend, and came up with a little drawing page for the iPhone.  The slower you drag your finger across the screen, the fatter the line will be. If you use multiple fingers at once, each should produce its own line with its own color. Note that you must use a touch-screen device; there's no mouse support at all. Also, there's no way to control the color yourself, and the only way to clear the screen is to reload the page.

The screenshot on the right was taken after clicking on the little "plus" button in Safari and adding the page to my "home screen", then launching the page from there. This gets rid of the URL bar, so that you can have more empty black space above your carefully drawn portraits.

I only tested it on my iPhone 3G, but it ought to work on any iOS device. Please comment if you notice it fails on an Apple touch device or if it works on anything else.

I count the project as a success because my three-year-old now prefers this to the little drawing app she used to use on my phone, and mine of course doesn't have any ads.

Feel free to use the 110 or so lines of code however you'd like.

Update: I received a report that it works on the Droid.