если еще актуально , теперь только ровные линии! можно еще изменить допустимую кривизну в меньшую сторону или в большую!
как изменить mousemove на touchmove поможет эта хорошая статья
http://habrahabr.ru/company/sibirix/blog/227175/
<canvas id="c" width="500" height="150" style="border: solid red 1px"></canvas>
[JS]
<script>
var canvas = document.getElementById('c'),
ctx = canvas.getContext('2d');
var o = {
cor: [],
handleEvent: function (e) {
var that = this;
if(e.type == 'mousedown') {
this.cor.push([{x: e.x, y: e.y}])
canvas.onmousemove = function (e) { that.draw(e) };
}
else if(e.type == 'mouseup') {
canvas.onmousemove = null;
this.cor[this.cor.length-1].push({x: e.x, y: e.y})
if(this.cor.length == 2) this.fn();;
}
},
init: function () {
canvas.addEventListener('mousedown', this, false);
canvas.addEventListener('mouseup', this, false);
},
draw: function (e) {
ctx.beginPath();
ctx.fillRect(e.x,e.y, 5,5)
ctx.strokeStyle = 'red';
ctx.stroke();
var cor = this.cor, len = this.cor.length-1;
if(Math.abs(cor[len][0].x - e.x) > 10 || Math.abs(cor[len][0].y - e.y) > 10) {
this.cor[this.cor.length-1].push({x: e.x, y: e.y})
}
},
fn: function (){
var cor1 = Math.abs(this.cor[0][0].x - this.cor[0][this.cor.length-1].x)
var cor2 = Math.abs(this.cor[1][0].x - this.cor[1][this.cor.length-1].x)
var x = (cor1 > cor2) ? this.cor[0] : this.cor[1];
var y = (cor1 > cor2) ? this.cor[1] : this.cor[0];
//+15 это какая кривизна линии допустима
this.flag = y.every(function(o){ return o.x > y[0].x-15 && o.x < y[0].x+15; }) &&
x.every(function(o){ return o.y > x[0].y-15 && o.y < x[0].y+15; })
console.log(this.flag)
if(!this.flag) {
alert('упс!!!! а линия кривая')
this.cor = [];
return;
}
x = x.sort(function(a,b) {return a.x - b.x})
y = y.sort(function(a,b) {return a.y - b.y})
if(x[0].x < y[0].x && x[0].y > y[0].y && x[x.length-1].x > y[y.length-1].x && x[x.length-1].y < y[y.length-1].y) alert('попробуй нарисовать кривую линию');
this.cor = [];
}
}
o.init();
</script>
[/JS]