javascript library to sketch on HTML5 canvas with pen stylus
Latest commit 11bd78d Sep 2, 2013 @homanchou update readme
Failed to load latest commit information.
.gitignore add git ignore Aug 23, 2011 update readme Sep 2, 2013
index.html move css into library Sep 1, 2013 update readme Sep 2, 2013
sketchyPad.js move css into library Sep 1, 2013 start mvc Aug 31, 2013
smooth.js start mvc Aug 31, 2013


sketchyPad is jQuery plugin for drawing with a wacam pen in your web browser.

To make any div with a width and height a sketchable area just do:

Usage: $('#mydiv').sketchyPad()

See example: index.html.

The source code is written in coffeescript, see

I've tried to keep the code clean and written in a model, view, controller separation of concerns, so it should be a good starting point to customize the code if you want to add or remove features.

The view is a wrapper around a canvas and contains all the logic for drawing lines on canvas context. Stokes that are drawn with more pen pressure are drawn slightly thicker than strokes that are drawn lightly.

The data structure is a list of points and pressures (using the wacom pen driver), and timestamps incase we need to animate the strokes back (play back animation)

The router adds event bindings to the canvas to listen for mouse/pen movements and triggers call backs.

Finally the controller ties everything together. It creates and hooks up the other pieces, listens for events, populates data structures and informs the canvas to render the new data.


add datastructure methods for getting back data as a image/png add view playback animation