jSketch

$(function() {

    var $sketcher = $('#drawing-canvas').sketchable();
    var $outputEl = $('#drawing-data');

    $('a#clear').click(function(evt) {
      evt.preventDefault();
      $sketcher.sketchable('clear');
      $outputEl.empty();
    });

    $('a#data').click(function(evt) {
      evt.preventDefault();
      var strokes = $sketcher.sketchable('strokes');
      var p = 'Drawing has '+ strokes.length +' strokes<br>';
      for (var i = 0; i < strokes.length; ++i) {
        p += '<strong>stroke ' + i + ':</strong> ';
        var stroke = strokes[i];
        for (var j = 0; j < stroke.length; ++j) {
          var point = stroke[j];
          p += '(' + point[0] + ',' + point[1] + ')';
        }
        p += '<br>';
      }
      $outputEl.html(p);
    });

    $('a#undo').click(function(evt) {
      evt.preventDefault();
      $sketcher.sketchable('memento.undo');
    });

    $('a#redo').click(function(evt) {
      evt.preventDefault();
      $sketcher.sketchable('memento.redo');
    });

});