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){
	// from http://www.quirksmode.org/js/findpos.html
	var x = e.pageX, y = e.pageY;
	var obj = e.target;
	do {
		x -= obj.offsetLeft;
		y -= obj.offsetTop;
	} while(obj = obj.offsetParent);

	line.starting_point.x = x;
	line.starting_point.y = y;
	line.end_point.x = x;
	line.end_point.y = y;
	drawing.active = true;

	drawing.draw_start(line);
}

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

function move(e){
	if(drawing.active){
		var x = e.pageX, y = e.pageY;
		var obj = e.target;
		do {
			x -= obj.offsetLeft;
			y -= obj.offsetTop;
		} while(obj = obj.offsetParent);

		line.end_point.x = x;
		line.end_point.y = y;

		drawing.draw_move(line);
	}
}

function out(e){
	// This didn't work too well
	// 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();
}