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

README.md

sketchyPad

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 sketchypad.coffee

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.

TODO:

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