diff --git a/drawing.js b/drawing.js
new file mode 100644
index 0000000..899f4c3
--- /dev/null
+++ b/drawing.js
@@ -0,0 +1,66 @@
+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();
+}
diff --git a/index.html b/index.html
index 1c52fd9..7391d8a 100644
--- a/index.html
+++ b/index.html
@@ -17,8 +17,8 @@
background-color: #fda;
width: 320px;
height: 480px;
- opacity: 0.5;
- border: 2px solid black;
+ opacity: 0.1;
+ border: 1px solid black;
}
.user {
-webkit-transition: left 0.5s linear, top 0.5s linear;
@@ -39,37 +39,46 @@
padding: 2px;
background-color: #0af;
}
+ #svgscreen {
+ background-color: #adf;
+ position: absolute;
+ width: 320px;
+ height: 480px;
+ }
+ #svgscreen line {
+ stroke: rgb(255,0,0);
+ stroke-width: 2;
+ }
-
+
+
+