Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- (function() {
- var App;
- App = {};
- /*
- Init
- */
- App.init = function() {
- App.canvas = document.createElement('canvas');
- App.canvas.height = 600;
- App.canvas.width = 1200;
- document.getElementsByTagName('article')[0].appendChild(App.canvas);
- App.ctx = App.canvas.getContext("2d");
- App.ctx.fillStyle = "solid";
- App.ctx.strokeStyle = "#ECD018";
- App.ctx.lineWidth = 5;
- App.ctx.lineCap = "round";
- App.socket = io.connect('http://107.20.163.241');
- App.socket.on('draw', function(data) {
- return App.draw(data.x, data.y, data.type);
- });
- App.draw = function(x, y, type) {
- if (type === "dragstart") {
- App.ctx.beginPath();
- return App.ctx.moveTo(x, y);
- } else if (type === "drag") {
- App.ctx.lineTo(x, y);
- return App.ctx.stroke();
- } else {
- return App.ctx.closePath();
- }
- };
- };
- /*
- Draw Events
- */
- $('canvas').live('drag dragstart dragend', function(e) {
- var offset, type, x, y;
- type = e.handleObj.type;
- offset = $(this).offset();
- e.offsetX = e.layerX - offset.left;
- e.offsetY = e.layerY - offset.top;
- x = e.offsetX;
- y = e.offsetY;
- App.draw(x, y, type);
- App.socket.emit('drawClick', {
- x: x,
- y: y,
- type: type
- });
- });
- $(function() {
- return App.init();
- });
- }).call(this);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement