jSketch

(function() {

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

    $('#strokes').on('click', function(evt) {
      evt.preventDefault();

      var sampleGesture = [[[143,118,0],[145,120,4],[172,146,28],[189,163,45],[206,182,61],[217,194,78],[231,212,95],[246,232,111],[262,251,128],[278,272,145],[291,288,162],[298,297,178],[303,304,195],[302,305,285],[300,304,295],[289,296,312],[276,290,328],[260,283,344],[242,279,361],[224,275,378],[207,274,394],[189,272,411],[173,272,428],[160,272,444],[158,272,461],[160,268,565],[161,266,577],[168,254,594],[179,240,611],[194,218,628],[214,194,644],[246,158,661],[260,138,677],[271,124,693],[273,120,710]]];
      $sketcher.sketchable('strokes', sampleGesture);
    });

    $('a#clear').click(function(evt) {
      evt.preventDefault();
      // NB: `true` means "keep strokes".
      $sketcher.sketchable('clear', true);
    });

})();