beats-website/drawing.js

var line = {
	starting_point: {x: 0, y: 0},
	end_point: {x: 0, y: 0}
};

var drawing = {
	active: false,
	draw_start: null,
	draw_move: null,
	draw_end: null,
	draw_cancel: null
};

function down(e){
	line.starting_point.x = e.pageX - this.offsetLeft;
	line.starting_point.y = e.pageY - this.offsetTop;
	line.end_point.x = e.pageX - this.offsetLeft;
	line.end_point.y = e.pageY - this.offsetTop;
	drawing.active = true;

	drawing.draw_start(line);
}

function up(e){
	drawing.active = false;

	drawing.draw_end(line);
}

function move(e){
	if(drawing.active){
		line.end_point.x = e.pageX - this.offsetLeft;
		line.end_point.y = e.pageY - this.offsetTop;

		drawing.draw_move(line);
	}
}

function out(e){
	drawing.active = false;
	drawing.draw_cancel(line);
}

function init_drawing(element, draw_start, draw_move, draw_end, draw_cancel){
	drawing.draw_start = draw_start;
	drawing.draw_move = draw_move;
	drawing.draw_end = draw_end;
	drawing.draw_cancel = draw_cancel;

	// Desktop clients
	element.addEventListener('mousedown', down, false);
	element.addEventListener('mouseup', up, false);
	element.addEventListener('mousemove', move, false);
	element.addEventListener('mouseout', out, false);

	// Phones/etc clients
	element.addEventListener('touchstart', down, false);
	element.addEventListener('touchend', up, false);
	element.addEventListener('touchmove', move, false);
	element.addEventListener('touchcancel', out, false);
}

// To prevent scrolling on devices
function prevent_scrolling(event){
	event.preventDefault();
}