diff --git a/drawnode.js b/drawnode.js
new file mode 100644
index 0000000..2002435
--- /dev/null
+++ b/drawnode.js
@@ -0,0 +1,14 @@
+var express = require('express');
+
+var app = express.createServer();
+app.use(express.static(__dirname + '/ui'));
+app.listen(1337);
+
+var io = require('socket.io').listen(app);
+
+io.sockets.on('connection', function(socket) {
+ socket.on('draw', function(draw) {
+ console.log(draw);
+ socket.broadcast.emit('draw', draw);
+ });
+});
diff --git a/ui/index.html b/ui/index.html
new file mode 100644
index 0000000..ddac147
--- /dev/null
+++ b/ui/index.html
@@ -0,0 +1,16 @@
+
+
+
+ Drawnode
+
+
+
+
+
+
+ Drawnode
+
+
+
\ No newline at end of file
diff --git a/ui/ui.js b/ui/ui.js
new file mode 100644
index 0000000..f2b05ee
--- /dev/null
+++ b/ui/ui.js
@@ -0,0 +1,50 @@
+var randomColor = function() {
+ var letters = '0123456789ABCDEF'.split('');
+ var color = '#';
+ for (var i = 0; i < 6; i++ ) {
+ color += letters[Math.round(Math.random() * 15)];
+ }
+ return color;
+}
+
+$(document).ready(function() {
+ var socket = io.connect('http://localhost:1337/');
+ socket.on('draw', function(json) {
+ var coords = JSON.parse(json);
+ draw(coords.ax, coords.ay, coords.bx, coords.by, coords.color);
+ });
+
+ var canvas = $('#canvas');
+ var ctx = canvas[0].getContext('2d');
+ var ax = -1, ay = -1;
+ var color = randomColor();
+ var draw = function(ax, ay, bx, by, color) {
+ ctx.strokeStyle = color;
+ ctx.beginPath();
+ ctx.moveTo(ax, ay);
+ ctx.lineTo(bx, by);
+ ctx.closePath();
+ ctx.stroke();
+ };
+
+ canvas.mousedown(function(e) {
+ ax = e.offsetX;
+ ay = e.offsetY;
+ });
+ canvas.mousemove(function(e) {
+ if (ax != -1) {
+ draw(ax, ay, e.offsetX, e.offsetY, color);
+ socket.emit('draw', JSON.stringify({ ax: ax, ay: ay, bx: e.offsetX, by: e.offsetY, color: color}));
+ ax = e.offsetX;
+ ay = e.offsetY;
+ }
+ });
+
+ canvas.mouseup(function(e) {
+ ax = -1;
+ });
+
+ canvas.mouseleave(function(e) {
+ ax = -1;
+ });
+});