jSketch

(function() {

    var sketcher = new Sketchable(document.getElementById('drawing-canvas'));
    var outputEl = document.getElementById('drawing-data');

    document.getElementById('clear').addEventListener('click', function(evt) {
      evt.preventDefault();
      sketcher.clear();
      outputEl.innerHTML = '';
    });

    document.getElementById('data').addEventListener('click', function(evt) {
      evt.preventDefault();
      var strokes = sketcher.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.innerHTML = p;
    });

    document.getElementById('undo').addEventListener('click', function(evt) {
      evt.preventDefault();
      sketcher.memento.undo();
    });

    document.getElementById('redo').addEventListener('click', function(evt) {
      evt.preventDefault();
      sketcher.memento.redo();
    });

})();