jSketch

$(function() {

    var options = {
      events: {
        mousedown: function(elem, data, evt) {
          notifyEvent(evt.type);
        },
        mouseup: function(elem, data, evt) {
          notifyEvent(evt.type);
        },
        mousemove: function(elem, data, evt) {
          notifyEvent(evt.type);
        }
      }
    };

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

    // Change interactive state when clicking on the toggle checkbox.
    $('#toggle-interactive').on('click', function(evt) {
      options.interactive = $(this).is(':checked');
      $sketcher.sketchable('config', options);
    });

    function notifyEvent(type) {
      $('#drawing-data').html('<p><strong>' + type + '</strong> event triggered</p>');
    }

});