var canvasWidth = 600;
var canvasHeight = 600;
var socket;
var brushSize = 30;
var data = {
		x: 0,
		y: 0,
		oldX: 0,
		oldY: 0
	}

function setup() {
	createCanvas(canvasWidth,canvasHeight);
	background(51);
	socket = io.connect('http://localhost:3000');
	socket.on('mouse', newDrawing);
}

function newDrawing(data){
	stroke(255);
	fill(255,0,100);
	strokeCap(ROUND);
	line(data.x,data.y,data.oldX,data.oldY);
}

function mouseDragged(){
	socket.emit('mouse', data);
}


function draw() {
	stroke(255)
	strokeCap(ROUND);
	updateMouseCoords();

	if(mouseIsPressed == true){
  line(data.x, data.y, data.oldX, data.oldY);
	}
}

function updateMouseCoords(){
	data.x = mouseX;
	data.y = mouseY;
	data.oldX = pmouseX;
	data.oldY = pmouseY;
}