├── index.html
├── js
└── jquery.event.drag-2.0.js
├── readme
├── scripts.coffee
├── scripts.js
├── server.js
└── style.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | HTML5 Canvas + Node.JS Socket.io
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/js/jquery.event.drag-2.0.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/websocket-canvas-draw/7b37a8f884b2b2a27928838d7c00d15a8aa67b1b/js/jquery.event.drag-2.0.js
--------------------------------------------------------------------------------
/readme:
--------------------------------------------------------------------------------
1 | wat
--------------------------------------------------------------------------------
/scripts.coffee:
--------------------------------------------------------------------------------
1 | # setup our application with its own namespace
2 | App = {}
3 |
4 | ###
5 | Init
6 | ###
7 | App.init = ->
8 | App.canvas = document.createElement 'canvas' #create the canvas element
9 | App.canvas.height = 400
10 | App.canvas.width = 800 #size it up
11 | document.getElementsByTagName('article')[0].appendChild(App.canvas) #append it into the DOM
12 |
13 | App.ctx = App.canvas.getContext("2d") # Store the context
14 |
15 | # set some preferences for our line drawing.
16 | App.ctx.fillStyle = "solid"
17 | App.ctx.strokeStyle = "#ECD018"
18 | App.ctx.lineWidth = 5
19 | App.ctx.lineCap = "round"
20 |
21 | # Sockets!
22 | App.socket = io.connect('http://localhost:4000')
23 |
24 | App.socket.on 'draw', (data) ->
25 | App.draw(data.x,data.y,data.type)
26 |
27 | # Draw Function
28 | App.draw = (x,y,type) ->
29 | if type is "dragstart"
30 | App.ctx.beginPath()
31 | App.ctx.moveTo(x,y)
32 | else if type is "drag"
33 | App.ctx.lineTo(x,y)
34 | App.ctx.stroke()
35 | else
36 | App.ctx.closePath()
37 | return
38 |
39 |
40 |
41 |
42 | ###
43 | Draw Events
44 | ###
45 | $('canvas').live 'drag dragstart dragend', (e) ->
46 | type = e.handleObj.type
47 | offset = $(this).offset()
48 |
49 | e.offsetX = e.layerX - offset.left
50 | e.offsetY = e.layerY - offset.top
51 | x = e.offsetX
52 | y = e.offsetY
53 | App.draw(x,y,type)
54 | App.socket.emit('drawClick', { x : x, y : y, type : type})
55 | return
56 |
57 |
58 |
59 | # jQuery document.ready
60 | $ ->
61 | App.init()
62 |
--------------------------------------------------------------------------------
/scripts.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | var App;
3 | App = {};
4 | /*
5 | Init
6 | */
7 | App.init = function() {
8 | App.canvas = document.createElement('canvas');
9 | App.canvas.height = 400;
10 | App.canvas.width = 800;
11 | document.getElementsByTagName('article')[0].appendChild(App.canvas);
12 | App.ctx = App.canvas.getContext("2d");
13 | App.ctx.fillStyle = "solid";
14 | App.ctx.strokeStyle = "#ECD018";
15 | App.ctx.lineWidth = 5;
16 | App.ctx.lineCap = "round";
17 | App.socket = io.connect('http://localhost:4000');
18 | App.socket.on('draw', function(data) {
19 | return App.draw(data.x, data.y, data.type);
20 | });
21 | App.draw = function(x, y, type) {
22 | if (type === "dragstart") {
23 | App.ctx.beginPath();
24 | return App.ctx.moveTo(x, y);
25 | } else if (type === "drag") {
26 | App.ctx.lineTo(x, y);
27 | return App.ctx.stroke();
28 | } else {
29 | return App.ctx.closePath();
30 | }
31 | };
32 | };
33 | /*
34 | Draw Events
35 | */
36 | $('canvas').live('drag dragstart dragend', function(e) {
37 | var offset, type, x, y;
38 | type = e.handleObj.type;
39 | offset = $(this).offset();
40 | e.offsetX = e.layerX - offset.left;
41 | e.offsetY = e.layerY - offset.top;
42 | x = e.offsetX;
43 | y = e.offsetY;
44 | App.draw(x, y, type);
45 | App.socket.emit('drawClick', {
46 | x: x,
47 | y: y,
48 | type: type
49 | });
50 | });
51 | $(function() {
52 | return App.init();
53 | });
54 | }).call(this);
55 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | var io;
3 | io = require('socket.io').listen(4000);
4 | io.sockets.on('connection', function(socket) {
5 | socket.on('drawClick', function(data) {
6 | socket.broadcast.emit('draw', {
7 | x: data.x,
8 | y: data.y,
9 | type: data.type
10 | });
11 | });
12 | });
13 | }).call(this);
14 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}table{border-collapse:collapse;border-spacing:0;}.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}.clearfix{display:inline-block;}html[xmlns] .clearfix{display:block;}* html .clearfix{height:1%;}
2 |
3 |
4 |
5 | body {
6 | background: #392C44;
7 | }
8 |
9 |
10 | canvas {
11 | background: #fff;
12 | margin: 20px auto;
13 | border: 5px solid #E8E8E8;
14 | display: block;}
--------------------------------------------------------------------------------