jSketch

(function() {

    var strokesExample = [[[103,46,0],[103,46,53],[103,46,73],[103,48,84],[103,52,100],[103,60,118],[103,65,134],[103,75,151],[103,86,167],[103,91,184],[103,100,201],[104,108,218],[104,111,233],[104,118,251],[104,121,267],[104,127,283],[104,133,300],[104,135,317],[104,140,334],[104,142,350],[104,145,367],[104,147,384],[104,148,414]],[[108,101,1331],[109,101,1413],[112,101,1432],[118,101,1449],[120,101,1465],[126,99,1482],[130,98,1499],[132,98,1515],[136,97,1531],[140,96,1548],[141,96,1565],[144,96,1582],[146,96,1598],[150,95,1614],[153,95,1631],[155,95,1648],[157,95,1664],[158,95,1681],[159,95,1712]],[[154,45,2668],[154,47,2704],[154,49,2723],[154,51,2735],[154,53,2746],[154,55,2763],[154,61,2779],[154,69,2796],[154,73,2812],[154,80,2829],[154,84,2846],[154,91,2862],[154,98,2879],[154,101,2895],[154,108,2913],[154,111,2929],[154,117,2945],[154,122,2962],[154,124,2979],[155,129,2996],[155,131,3012],[156,135,3029],[156,137,3045],[157,139,3063],[157,141,3083],[157,143,3146]],[[211,74,4561],[211,75,4596],[211,76,4609],[211,78,4626],[211,82,4643],[211,87,4659],[211,90,4675],[211,95,4692],[211,99,4709],[211,102,4726],[211,107,4742],[211,109,4759],[211,113,4776],[211,118,4792],[211,120,4809],[211,125,4825],[211,126,4842],[211,129,4859],[211,131,4875],[211,133,4892],[211,134,4908],[211,135,4945]],[[212,45,6651]]];

    var outputEl = document.getElementById('drawing-data');
    var sketcher = new Sketchable(document.getElementById('drawing-canvas'), {
      events: {
        animationstart: function(elem, data) {
          outputEl.innerHTML = 'Animation started!';
        },
        animationstep: function(elem, data) {
          outputEl.innerHTML = 'Animation stepped!';
        },
        animationend: function(elem, data) {
          outputEl.innerHTML = 'Animation ended!';
        },
        clear: function(elem, data) {
          outputEl.innerHTML = '';
        }
      }
    })
    .strokes(strokesExample)
    .clear(true)
    .animate.strokes();

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

})();