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 = new Sketchable(document.getElementById('drawing-canvas'), options);

    // Change interactive state when clicking on the toggle checkbox.
    document.getElementById('toggle-interactive').addEventListener('click', function(evt) {
      options.interactive = this.checked;
      sketcher.config(options);
    });

    function notifyEvent(type) {
      document.getElementById('drawing-data').innerHTML = '<p><strong>' + type + '</strong> event triggered</p>';
    }

})();