jSketch

$(function() {

    $('.drawing-canvas').sketchable();

    function findCanvas(button) {
      return $(button).parent().prev();
    };

    function findOutput(button) {
      return $(button).parent().next().next();
    };

    $('a.clear').click(function(evt) {
      evt.preventDefault();
      findCanvas(this).sketchable('clear');
      findOutput(this).empty();
    });

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

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

    $('a.data').click(function(evt) {
      evt.preventDefault();
      var strokes = findCanvas(this).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) {
          p += '(' + stroke[j][0] +','+ stroke[j][1] + ')';
        }
        p += '<br>';
      }
      findOutput(this).html(p);
    });

});