Wanna try the vanilla JavaScript version?
$(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 = $('#drawing-data');
var $sketcher = $('#drawing-canvas').sketchable({
events: {
animationstart: function(elem, data) {
$outputEl.html('Animation started!');
},
animationstep: function(elem, data) {
$outputEl.html('Animation stepped!');
},
animationend: function(elem, data) {
$outputEl.html('Animation ended!');
},
clear: function(elem, data) {
$outputEl.empty();
}
}
})
.sketchable('strokes', strokesExample)
.sketchable('clear', true)
.sketchable('animate.strokes');
$('a#clear').click(function(evt) {
evt.preventDefault();
$sketcher.sketchable('clear');
});
});