Im trying to make a basic drawing program using the angular-touch module and its $swipe service along with an html5 canvas here is what i came up with it is contained within a module and controller that i know works
this.canvas=angular.element('canvas')[0];
console.log(this.canvas.on)
this.canvasCord=angular.element(this.canvas).offset();
var ctx=this.canvas.getContext('2d');
$swipe.bind(angular.element('canvas'),{start:this.startDraw,move:this.coninueDraw,end:this.continueDraw,cancel:function(event){console.log(event);}},["mouse","touch"]);
var convertCord=function(cord){
cord.x=cord.x-this.canvasCord.left;
cord.y=cord.y-this.canvasCord.top;
return cord;
};
this.startDraw=function(cord,event){
console.log('starting')
cord=convertCord(cord);
ctx.beginPath()
ctx.moveTo(cord.x,cord.y);
ctx.lineWidth='5';
};
this.continueDraw=function(cord,event){
console.log(cord);
cord=convertCord(cord);
ctx.lineTo(cord.x,cord.y);
ctx.stroke();
};
my html for my canvas is just a basic <canvas></canvas>
my problem is that the event functions that are part of the $swipe.bind() are never actually called when the element is touched or clicked or swiped. the only callback i can seem to get to work is the cancel which runs i tap or click the canvas repetitively in a short amount of time. i am using jquery mobile but angularjs and angularjs-touch load after jquery and jquery mobile. does anyone know why this isnt working?
