nicolehe/canvas.html

## canvas.html
<html>

<head>
    <style>
    body {
        margin: 0;
        font-family: monospace;
        color: #413C58;
        font-size: 12pt;
    }
    /*        canvas {
        position: absolute;
        left: 0px;
        top: 0px;
        border: 1px solid #000000;
    }
*/
    </style>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
    var myCanvas;
    var theirCanvas;
    var myContext;
    var theirContext;
    var myColor;
    var theirColor;
    var isDrawing;
    var myEraseButton;
    var socket = io.connect('http://localhost:8080');

    socket.on('connect', function() {
        console.log("Connected");
    });


    function init() {

    	myEraseButton = document.getElementById("eraseButton");
    	myEraseButton.addEventListener('click', erase);

        myCanvas = document.getElementById('myCanvas');
        theirCanvas = document.getElementById('theirCanvas');

        myColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);

        myContext = myCanvas.getContext('2d');
        theirContext = theirCanvas.getContext('2d');

        myContext.lineWidth = 10;
        myContext.lineJoin = myContext.lineCap = 'round';

        theirContext.lineWidth = 10;
        theirContext.lineJoin = myContext.lineCap = 'round';


        socket.emit('getcolor', myColor);
        drawAll();
    }

    function drawAll() {
        drawMyCanvas();
        drawTheirCanvas();
    }

    function drawMyCanvas() {
        myCanvas.onmousedown = function(evt) {

            isDrawing = true;
            myContext.moveTo(evt.clientX, evt.clientY);
        };

        myCanvas.addEventListener('mousemove', function(evt) {
            //console.log(evt);
            if (isDrawing) {
                myContext.lineTo(evt.clientX, evt.clientY);

                myContext.strokeStyle = myColor;
                myContext.stroke();

                var myDrawing = {
                    x: evt.clientX,
                    y: evt.clientY
                };

                socket.emit('mousemove', myDrawing);
            }
        });

        myCanvas.onmouseup = function() {
            isDrawing = false;
        };

    }

    function drawTheirCanvas() {
        socket.on('getcolor', function(data) {
            theirColor = data;
        });

        socket.on('mousemove', function(data) {
            theirContext.strokeStyle = theirColor;
            theirContext.lineTo(data.x, data.y);
            theirContext.stroke();
        });

        socket.on('erased', function(data) {
            theirContext.clearRect(0, 0, theirCanvas.width, theirCanvas.height);
        });
    }

    function erase() {
        myContext.clearRect(0, 0, myCanvas.width, myCanvas.height);
        socket.emit('erased', data);
        myColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
    }

    window.addEventListener('load', init);
    </script>
</head>

<body>
    <canvas width="500" height="500" id="myCanvas" style="border: 1px solid #000000; left: 0; top: 0; z-index: 0;"></canvas>
    <canvas width="500" height="500" id="theirCanvas" style="border: 1px solid #000000; left: 0; top: 0; z-index: 1;"></canvas>
    <button id ="eraseButton">erase</button>
</body>

</html>

## canvasserver.js
// HTTP Portion
var http = require('http');
var fs = require('fs'); // Using the filesystem module
var httpServer = http.createServer(requestHandler);
httpServer.listen(8080);

function requestHandler(req, res) {
    // Read index.html
    fs.readFile(__dirname + '/canvas.html',
        // Callback function for reading
        function(err, data) {
            // if there is an error
            if (err) {
                res.writeHead(500);
                return res.end('Error loading canvas.html');
            }
            // Otherwise, send the data, the contents of the file
            res.writeHead(200);
            res.end(data);
        }
    );
}


// WebSocket Portion
// WebSockets work with the HTTP server
var io = require('socket.io').listen(httpServer);

// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on('connection',
    // We are given a websocket object in our function
    function(socket) {

        console.log("We have a new client: " + socket.id);

        socket.on('mousemove', function(data) {
            socket.broadcast.emit('mousemove', data);

        });

        socket.on('getcolor', function(data) {
            socket.broadcast.emit('getcolor', data);
            console.log(data);
        });

        socket.on('erased', function(data) {
        	socket.broadcast.emit('erased', data);
        });

        socket.on('disconnect', function() {
            console.log("Client has disconnected " + socket.id);
        });


    }
);
	<html>

	<head>
	<style>
	body {
	margin: 0;
	font-family: monospace;
	color: #413C58;
	font-size: 12pt;
	}
	/* canvas {
	position: absolute;
	left: 0px;
	top: 0px;
	border: 1px solid #000000;
	}
	*/
	</style>
	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript">
	var myCanvas;
	var theirCanvas;
	var myContext;
	var theirContext;
	var myColor;
	var theirColor;
	var isDrawing;
	var myEraseButton;
	var socket = io.connect('http://localhost:8080');

	socket.on('connect', function() {
	console.log("Connected");
	});


	function init() {

	myEraseButton = document.getElementById("eraseButton");
	myEraseButton.addEventListener('click', erase);

	myCanvas = document.getElementById('myCanvas');
	theirCanvas = document.getElementById('theirCanvas');

	myColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);

	myContext = myCanvas.getContext('2d');
	theirContext = theirCanvas.getContext('2d');

	myContext.lineWidth = 10;
	myContext.lineJoin = myContext.lineCap = 'round';

	theirContext.lineWidth = 10;
	theirContext.lineJoin = myContext.lineCap = 'round';


	socket.emit('getcolor', myColor);
	drawAll();
	}

	function drawAll() {
	drawMyCanvas();
	drawTheirCanvas();
	}

	function drawMyCanvas() {
	myCanvas.onmousedown = function(evt) {

	isDrawing = true;
	myContext.moveTo(evt.clientX, evt.clientY);
	};

	myCanvas.addEventListener('mousemove', function(evt) {
	//console.log(evt);
	if (isDrawing) {
	myContext.lineTo(evt.clientX, evt.clientY);

	myContext.strokeStyle = myColor;
	myContext.stroke();

	var myDrawing = {
	x: evt.clientX,
	y: evt.clientY
	};

	socket.emit('mousemove', myDrawing);
	}
	});

	myCanvas.onmouseup = function() {
	isDrawing = false;
	};

	}

	function drawTheirCanvas() {
	socket.on('getcolor', function(data) {
	theirColor = data;
	});

	socket.on('mousemove', function(data) {
	theirContext.strokeStyle = theirColor;
	theirContext.lineTo(data.x, data.y);
	theirContext.stroke();
	});

	socket.on('erased', function(data) {
	theirContext.clearRect(0, 0, theirCanvas.width, theirCanvas.height);
	});
	}

	function erase() {
	myContext.clearRect(0, 0, myCanvas.width, myCanvas.height);
	socket.emit('erased', data);
	myColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
	}

	window.addEventListener('load', init);
	</script>
	</head>

	<body>
	<canvas width="500" height="500" id="myCanvas" style="border: 1px solid #000000; left: 0; top: 0; z-index: 0;"></canvas>
	<canvas width="500" height="500" id="theirCanvas" style="border: 1px solid #000000; left: 0; top: 0; z-index: 1;"></canvas>
	<button id ="eraseButton">erase</button>
	</body>

	</html>
	// HTTP Portion
	var http = require('http');
	var fs = require('fs'); // Using the filesystem module
	var httpServer = http.createServer(requestHandler);
	httpServer.listen(8080);

	function requestHandler(req, res) {
	// Read index.html
	fs.readFile(__dirname + '/canvas.html',
	// Callback function for reading
	function(err, data) {
	// if there is an error
	if (err) {
	res.writeHead(500);
	return res.end('Error loading canvas.html');
	}
	// Otherwise, send the data, the contents of the file
	res.writeHead(200);
	res.end(data);
	}
	);
	}


	// WebSocket Portion
	// WebSockets work with the HTTP server
	var io = require('socket.io').listen(httpServer);

	// Register a callback function to run when we have an individual connection
	// This is run for each individual user that connects
	io.sockets.on('connection',
	// We are given a websocket object in our function
	function(socket) {

	console.log("We have a new client: " + socket.id);

	socket.on('mousemove', function(data) {
	socket.broadcast.emit('mousemove', data);

	});

	socket.on('getcolor', function(data) {
	socket.broadcast.emit('getcolor', data);
	console.log(data);
	});

	socket.on('erased', function(data) {
	socket.broadcast.emit('erased', data);
	});

	socket.on('disconnect', function() {
	console.log("Client has disconnected " + socket.id);
	});


	}
	);