jSketch

$(function() {

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

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

});