jSketch

(function() {

    var timer;
    var sketcher = new Sketchable('#drawing-canvas', {
      graphics: {
        lineWidth: 6,
        strokeStyle: 'red',
      },
      events: {
        // Wait for N seconds to disable penup strokes tracking.
        mouseup: function(elem, data, evt) {
          timer = setTimeout(function() {
            data.instance.config({ mouseupMovements: false });
          }, 3000);
        },
        // Enable penup strokes tracking, with custom config.
        mousedown: function(elem, data, evt) {
          clearTimeout(timer);
          data.instance.config({
            mouseupMovements: {
              lineWidth: 1,
            }
          });
        },
      }
    });

    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];
          var color = point[3] ? 'black' : 'gray';
          p += '<span style="color:' + color + '">(' + point[0] + ',' + point[1] + ')</span>';
        }
        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();
    });

})();