jSketch

(function() {

    var sketcher = new Sketchable(document.getElementById('drawing-canvas'));
    var outputEl = document.getElementById('drawing-data');
    var contents;

    document.getElementById('import').addEventListener('click', function(evt) {
      evt.preventDefault();
      if (!contents) {
        outputEl.textContent = 'Please draw something and click on `export` to save the data.';
        return;
      }
      sketcher.serializer.load(contents);
    });

    document.getElementById('export').addEventListener('click', function(evt) {
      evt.preventDefault();
      contents = sketcher.serializer.save();
      outputEl.textContent = 'Saved! Now clear the canvas and click on `import` to load data again.';
    });

    document.getElementById('clear').addEventListener('click', function(evt) {
      evt.preventDefault();
      sketcher.clear();
      outputEl.textContent = '';
    });

})();