jSketch

(function() {

    var $sketcher = $('#drawing-canvas').sketchable();
    var $outputEl = $('#drawing-data');
    var contents;

    $('a#import').click(function(evt) {
      evt.preventDefault();
      if (!contents) {
        $outputEl.text('Please draw something and click on `export` to save the data.');
        return;
      }
      $sketcher.sketchable('serializer.load', contents);
    });

    $('a#export').click(function(evt) {
      evt.preventDefault();
      contents = $sketcher.sketchable('serializer.save');
      $outputEl.text('Saved! Now clear the canvas and click on `import` to load data again.');
    });

    $('a#clear').click(function(evt) {
      evt.preventDefault();
      $sketcher.sketchable('clear');
      $outputEl.empty();
    });

})();