draw.html

<canvas id="example" height=450 width=300></canvas> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="magictouch.js"></script>


<script> 
  // canvasDrawr originally from Mike Taylr  http://miketaylr.com/
  // Tim Branyen massaged it: http://timbranyen.com/
  // Paul Irish did too, adding multi touch: http://paulirish.com/demo/multi
  // then Boris Smus made it work with MagicTouch.js

  var CanvasDrawr = function(options) {
    // grab canvas element
    var canvas = document.getElementById(options.id),
    ctxt = canvas.getContext("2d");

    // set props from options, but the defaults are for the cool kids
    ctxt.lineWidth = options.size || Math.ceil(Math.random() * 35);
    ctxt.lineCap = options.lineCap || "round";
    ctxt.pX = undefined;
    ctxt.pY = undefined;

    var lines = [,,];
    var offset = $(canvas).offset();

    var self = {
      //bind click events
      init: function() {
        //set pX and pY from first click

        canvas.addEventListener('touchstart', self.preDraw, false);
        canvas.addEventListener('touchmove', self.draw, false);


      },

      preDraw: function(event) {
        $.each(event.touches, function(i, touch) {
          var id = touch.identifier;
          lines[id] = { x     : this.pageX - offset.left, 
            y     : this.pageY - offset.top, 
            color : options.color || ["red", "green", "yellow", "blue", "magenta", "orangered"][Math.floor(Math.random() * 6)] 
          };
        });

        event.preventDefault();
      },

      draw: function(event) {
        var e = event, hmm = {};

        $.each(event.touches, function(i, touch) {
          var id = touch.identifier;
          var moveX = this.pageX - offset.left - lines[id].x,
          moveY = this.pageY - offset.top - lines[id].y;

          var ret = self.move(id, moveX, moveY);
          lines[id].x = ret.x;
          lines[id].y = ret.y;
        });

        event.preventDefault();
      },

      move: function(i, changeX, changeY) {
        ctxt.strokeStyle = lines[i].color;
        ctxt.beginPath();
        ctxt.moveTo(lines[i].x, lines[i].y);

        ctxt.lineTo(lines[i].x + changeX, lines[i].y + changeY);
        ctxt.stroke();
        ctxt.closePath();

        return { x: lines[i].x + changeX, y: lines[i].y + changeY };
      }
    };

    return self.init();
  };

  $(function(){
    var super_awesome_multitouch_drawing_canvas_thingy = new CanvasDrawr({id:"example", size: 5 }); 
    console.log('loaded');
  });
</script> 



<object id="tuio" type="application/x-tuio">Plugin FAILED to load</object>