Back in January I released Lil’ Doodle, a children’s drawing application for the iPad built with PhoneGap. Lil’ Doodle is meant for a simple sketch-and-erase experience similar to a children’s magnetic drawing toy, powered entirely by JavaScript and the HTML5 Canvas element. You can see a video of it in action below:
I’ve decided to release the source code of this application to demonstrate how you can create interactive drawing experiences for PhoneGap applications. You can access the full source of this application at:
This app was built on top of the “brush images” examples previously discussed on this blog.
A few notes about the Lil’ Doodle application:
- This app was designed specifically for the iPad. The UI is specifically styled for the iPad’s portrait form factor. The code is also specifically setup for touch events. If you try to run this code in the desktop browser, you will get layout and runtime JS errors.
- The sketching for this application does work on other platforms (Android, BlackBerry, etc…), however at the time of release, only the HTML5 Canvas on iOS performed well enough to release. This is because the HTML5 Canvas element on iOS is hardware accelerated. The HTML5 Canvas on BlackBerry Playbook OS 2.0 is now hardware accelerated, however, I have not repackaged and tested the app on that platform. The HTML5 Canvas inside of webview elements in Android is not yet hardware accelerated.
- Lil Doodle supports multiple touch points, where the “brush images” example, only supports a single touch point.
- Lil’ Doodle DOES NOT update the canvas on every touch event – if you did so, you would have runtime performance issues. Instead, it caches the touch locations, and updates the visual canvas inside of a render loop (target 60FPS). Using this approach, I was able to get very good performance, even with multiple touch points. The loop currently uses JS timeouts b/c iOS 5 and earlier do not support requestAnimationFrame.
You can get the full source code for Lil’ Doodle at: https://github.com/triceam/Lil-Doodle
Enjoy!