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(); }