Wanna try the vanilla JavaScript version?
$(function() {
var canvases = $('.drawing-canvas').sketchable({ interactive:false, cssCursors:false });
var canvas1 = $(canvases[0]);
var canvas2 = $(canvases[1]);
canvas1.sketchable('handler', function(elem, data) {
data.sketch
.lineStyle('red', 1)
.strokeRect(100,10, 30,30)
.beginFill('blue')
.fillRect(160,10, 50,30)
.endFill()
.drawImage('img/pencil.svg', 100,100)
.beginPath()
.lineStyle('green', 3)
.line(30,80, 30,180)
.lineTo(60,180)
.stroke()
.closePath()
.beginFill('pink')
.fillCircle(400,10, 50)
.endFill()
.lineStyle('orange', 5)
.strokeCircle(360,90, 50);
});
canvas2.sketchable('handler', function(elem, data) {
var w = data.sketch.stageWidth;
var h = data.sketch.stageHeight;
var off1 = 140;
var off2 = 340;
// First smiley.
data.sketch
.background('#EFF')
.beginFill('yellow')
.fillCircle(off1, h/2, 80)
.endFill()
.beginFill('black')
.fillCircle(off1-30, h/2-10, 10)
.fillCircle(off1+30, h/2-10, 10)
.endFill()
.beginPath()
.lineStyle('black', 8)
.curve(off1-30, h/2+30, off1+30, h/2+30, off1, h/1.3)
.stroke()
.closePath();
// Second smiley.
data.sketch
.beginFill('lightskyblue')
.fillCircle(off2, h/2, 80)
.endFill()
.beginFill('black')
.fillCircle(off2-30, h/2-10, 10)
.fillCircle(off2+30, h/2-10, 10)
.endFill()
.beginPath()
.lineStyle('black', 8)
.curve(off2-30, h/2+30, off2+30, h/2+30, off2, h/1.3 - 45)
.stroke()
.closePath();
});
// Low-level access to HTML5 canvas API is also available.
// Note: Anything drawn with the native API won't be recovered
// by the serializer plugin.
canvas1.sketchable('handler', function(elem, data) {
var ctx = data.sketch.context;
ctx.beginPath();
ctx.strokeStyle = '#555';
ctx.lineWidth = 2;
ctx.rect(100,100, 60,60);
ctx.stroke();
ctx.closePath();
});
});