I'm trying to make a Canvas that allows drawing on it.
I'm using AngularJS with Angular-Touch but it seems to be calling the cancel event frequently.
I think it has to do with the swipe buffer that determines if its a swipe or a scroll, but I'm not sure how to fix that.
Here's some code I've put down and it works sometimes but it is, like I said before, unreliable.
AngularJS:
var canvas=angular.element('canvas');
var canvasCord=function(canvas){
return angular.element(canvas).offset();
};
var ctx=canvas.getContext('2d');
this.ctx=ctx;
$swipe.bind(angular.element('canvas'),{
start:function(cord,event){
event.preventDefault();
cord=convertCord(cord,event.target);
ctx.beginPath();
ctx.moveTo(cord.x,cord.y);
ctx.lineWidth='5';
console.log('start');
},move:function(cord,event){
event.preventDefault();
cord=convertCord(cord,event.target);
ctx.lineTo(cord.x,cord.y);
ctx.stroke();
console.log('move');
},end:function(cord,event){
event.preventDefault();
console.log(event);
console.log(cord);
cord=convertCord(cord,event.target);
ctx.lineTo(cord.x,cord.y);
ctx.stroke();
console.log('end');
},cancel:function(event){
event.preventDefault();
console.log(event);
}
},["mouse","touch"]);
var convertCord=function(cord,canvas){
var offcord=canvasCord(canvas);
cord.x=cord.x-offcord.left;
cord.y=cord.y-offcord.top
console.log(cord);
return cord;
};
HTML:
<div class='canvas'>
<canvas height='500' width='500'></canvas>
</div>
I think it's possible going into Angular-Touch.js file and simply increase the buffer size but, is there a cleaner way to do it? And ngTouch is already in the module dependencies so it isn't dealing with that.
update
If found that was causes it to call the cancel even is that it moves more in the y direction then the x and is beyond the 10 px buffer. So I'm just looking for a clean way to increase the 10 px buffer.
