jSketch

(function() {

    var sketcher = new Sketchable('#drawing-canvas', {
      events: {
        // We use the "before" event hook to update brush type right before drawing starts.
        mousedownBefore: function(elem, data, evt) {
          var brushType = getBrushType();
          if (brushType == 'eraser') {
            // There is a method to set the brush in eraser mode.
            data.options.graphics.lineWidth = 20;
            data.sketch.eraser();
          } else if (brushType == 'pencil') {
            // There is a method to get the default mode (pencil) back.
            data.options.graphics.lineWidth = 3;
            data.sketch.pencil();
          }
        },
        // All methods have the following args: elem, data[, evt].
        init: setIcon
      }
    });

    // Update icon when clicking on a brush type.
    document.getElementById('brushes').addEventListener('click', function(evt) {
      sketcher.handler(setIcon);
    });

    function getBrushType() {
      return document.querySelector('input[type=radio]:checked').value.toLowerCase();
    }

    function setIcon(elem, data) {
      var brushType = getBrushType();
      if (brushType == 'eraser') {
        elem.style.cursor = 'url(img/broom.svg), auto';
      } else if (brushType == 'pencil') {
        elem.style.cursor = 'url(img/pencil.svg), auto';
      }
    }

})();