jSketch

(function() {

    var canvases = document.getElementsByClassName('drawing-canvas');

    var canvas1 = new Sketchable(canvases[0], { interactive:false, cssCursors:false });
    var canvas2 = new Sketchable(canvases[1], { interactive:false, cssCursors:false });

    canvas1.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.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.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();
    });

})();