jSketch

$(function() {

    var $sketcher = $('#drawing-canvas').sketchable({
      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.
    $('#brushes').on('click', function(evt) {
      $sketcher.sketchable('handler', setIcon);
    });

    function getBrushType() {
      return $('input[type=radio]:checked').val().toLowerCase();
    }

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

});