говори что нужно исправить постараюсь помочь

Надо учитывать что юзеры ровно не нарисуют) Надо новую схему) Век сенсорников)
Я вот щас новую систему регистраций запиливаю через изображения)
Выдается картинка с логотипом) По углам квадраты с пикселями) В одном углу логин в 3 остальных защитные рандомные пиксели) естественно все 10x10) Посмотрю как будут юзеры реагировать) Создам щас отдельную тему по этому поводу проблема с кнопкой сохранения изображения)
Фишка в том, что очень просто) Нажимаем авторизоваться выбираем изображения и все) Не надо вводить логины и пароли) Все в кликах)

Я щас думаю над идей с сеткой которую предложили) Можно сделать конструктор жестов) считай экран делишь визуально на 9 частей) И Как графический пароль)

Опишу еще некоторые измышления.
Все таки, управление жестами немного не комильфо.
Взять тот же плюс. Как нормально разграничить жесты пользователя на те, которые предназначены для управления интерфейсом вашего приложения(сайта) и интерфейсом страницы и браузера в целом? Слайд сверху вниз - это начало рисования плюса или желание прокрутить страницу???
Вводить новый прозрачный (или непрозрачный элемент) на странице и рассматривать манипуляции над ним, как управление внутренним интерфесом? Но тогда как узнать когда этот элемент должен быть введен? По клику на кнопку - тогда проще сделать кнопки для всех действий и не морочить ни себе ни людям голову. Какой-то специальный жест, который будет активировать "рабочую область для рисования", например touch+slideUp - это лишняя путаница...

В общем, нужно разрабатывать отдельную JS библиотеку для жестов. :)

если еще актуально , теперь только ровные линии! можно еще изменить допустимую кривизну в меньшую сторону или в большую!

как изменить 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]

Вот: http://habrahabr.ru/post/178611/
Может пригодится.