collective-drawing/public/index.html

<head>
	<title>drawing</title>
	<style>
		.center{
			text-align: center;
		}
		
		#drawing{
			border: 1px solid #000;
			box-shadow: 0px 0px 10px #000;
			margin-left: 10px;
		}
	</style>
</head>
<body>
	<h1 class="center">drawing editor</h1>
	<canvas id="drawing" width="400" height="400"></canvas><br><!--canvas is the field in that javascript will draw -->
	Stroke width: <input type="range" min="0.5" max="50" value="1" id="width"><br>
	Color: <input type="color" id="color">
	Brush: <select id="linecap">
		<option value="square">square</option>
		<option value="round">round</option>
		<option value="butt">butt</option>
	</select>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();     //starts socket.io
	
	
var lineWidth = 1;         //defautl lineWidt
var color = "#000000";     //default color
var brush = "square";      //default linecap
document.getElementById("linecap").addEventListener('change', function(){    //add event listener for the select field with the id "linecap". if it changes the value it it will trigger this function
	brush = this.value;          //save value in variable brush
});
document.getElementById("color").addEventListener('change', function(){       //add event listener for the input field with the id "linecap". if it changes the value it it will trigger this function
	color = this.value;         //save value in variable  color
});
document.getElementById("width").addEventListener('change', function(){        //add event listener for the input field with the id "linecap". if it changes the value it it will trigger this function
	lineWidth = this.value;    //save value in variable lineWidht
});

var canvas = document.getElementById("drawing");     //get the canvas element of the html document
var ctx = canvas.getContext('2d');      //get its pixel field in ctx variable
var pos = {x: 0, y: 0};    //pos variables

document.addEventListener('mousemove', draw); //add event listener for mouse movement. if it the mouse moves it will trigger function "draw"
document.addEventListener('mousedown', setPosition); //add event listener for mouse buttons if the are pressed down. if it a mouse button is pressed  it will trigger function "setPosition"

function setPosition(e){             
	pos.x = e.clientX - canvas.offsetLeft;          //e.clientX is the current mouse X position. canvas.offsetLeft is the canvas position form Left side. this calculation is necessary to really draw in mouse position
	pos.y = e.clientY - canvas.offsetTop;           //e.clientY is the current mouse Y position. canvas.offsetTop is the canvas position from the Top
}

function draw(e){      
	if(e.buttons !== 1) return;              //check if left mouse button is pressed otherwise stop function ("return")
	ctx.lineWidth = lineWidth;               //change the lineWidth
	ctx.lineCap = brush;                     //change the lineCap
	ctx.strokeStyle = color;                 //change the strokeStyle(color)
	ctx.beginPath();                         //begin the line
	ctx.moveTo(pos.x,pos.y);                 // start point of the line
	var startPos = {x: pos.x, y: pos.y};     //save the start point in variable startPos
	setPosition(e);                          //get the new mouse position (it will be saved in pos.x and pos.y --> see function setPosition
	ctx.lineTo(pos.x,pos.y);                 //draw line to new mouse position
	ctx.stroke();                            //this is the moment where the actual line is drawn
	socket.emit("picture", {                 //send data to the server
		startPos, 
		pos,
		color, 
		lineWidth
	});
}

socket.on("dingdong", (line) => {           //browser received data from the server(other browser has drawn a line
	console.log(line);
	ctx.lineWidth = line.lineWidth;
	ctx.strokeStyle = line.color;
	ctx.beginPath();
	ctx.moveTo(line.startPos.x, line.startPos.y);
	ctx.lineTo(line.pos.x, line.pos.y);
	ctx.stroke();
});

</script>
init commit 10 months ago			`<head>`
update from Tuesday 9 months ago			`<title>drawing</title>`
init commit 10 months ago			`<style>`
update from Tuesday 9 months ago			`.center{`
			`text-align: center;`
			`}`

			`#drawing{`
			`border: 1px solid #000;`
			`box-shadow: 0px 0px 10px #000;`
			`margin-left: 10px;`
			`}`
init commit 10 months ago			`</style>`
			`</head>`
			`<body>`
update from Tuesday 9 months ago			`<h1 class="center">drawing editor</h1>`
comments 9 months ago			`<canvas id="drawing" width="400" height="400"></canvas><br><!--canvas is the field in that javascript will draw -->`
update from Tuesday 9 months ago			`Stroke width: <input type="range" min="0.5" max="50" value="1" id="width"><br>`
			`Color: <input type="color" id="color">`
			`Brush: <select id="linecap">`
			`<option value="square">square</option>`
			`<option value="round">round</option>`
			`<option value="butt">butt</option>`
			`</select>`
init commit 10 months ago			`</body>`
			`<script src="/socket.io/socket.io.js"></script>`
			`<script>`
comments 9 months ago			`var socket = io(); //starts socket.io`
update from Tuesday 9 months ago

comments 9 months ago			`var lineWidth = 1; //defautl lineWidt`
			`var color = "#000000"; //default color`
			`var brush = "square"; //default linecap`
			`document.getElementById("linecap").addEventListener('change', function(){ //add event listener for the select field with the id "linecap". if it changes the value it it will trigger this function`
			`brush = this.value; //save value in variable brush`
update from Tuesday 9 months ago			`});`
comments 9 months ago			`document.getElementById("color").addEventListener('change', function(){ //add event listener for the input field with the id "linecap". if it changes the value it it will trigger this function`
			`color = this.value; //save value in variable color`
update from Tuesday 9 months ago			`});`
comments 9 months ago			`document.getElementById("width").addEventListener('change', function(){ //add event listener for the input field with the id "linecap". if it changes the value it it will trigger this function`
			`lineWidth = this.value; //save value in variable lineWidht`
update from Tuesday 9 months ago			`});`
init commit 10 months ago
comments 9 months ago			`var canvas = document.getElementById("drawing"); //get the canvas element of the html document`
			`var ctx = canvas.getContext('2d'); //get its pixel field in ctx variable`
			`var pos = {x: 0, y: 0}; //pos variables`
init commit 10 months ago
comments 9 months ago			`document.addEventListener('mousemove', draw); //add event listener for mouse movement. if it the mouse moves it will trigger function "draw"`
			`document.addEventListener('mousedown', setPosition); //add event listener for mouse buttons if the are pressed down. if it a mouse button is pressed it will trigger function "setPosition"`
init commit 10 months ago
comments 9 months ago			`function setPosition(e){`
			`pos.x = e.clientX - canvas.offsetLeft; //e.clientX is the current mouse X position. canvas.offsetLeft is the canvas position form Left side. this calculation is necessary to really draw in mouse position`
			`pos.y = e.clientY - canvas.offsetTop; //e.clientY is the current mouse Y position. canvas.offsetTop is the canvas position from the Top`
init commit 10 months ago			`}`

comments 9 months ago			`function draw(e){`
			`if(e.buttons !== 1) return; //check if left mouse button is pressed otherwise stop function ("return")`
			`ctx.lineWidth = lineWidth; //change the lineWidth`
			`ctx.lineCap = brush; //change the lineCap`
			`ctx.strokeStyle = color; //change the strokeStyle(color)`
			`ctx.beginPath(); //begin the line`
			`ctx.moveTo(pos.x,pos.y); // start point of the line`
			`var startPos = {x: pos.x, y: pos.y}; //save the start point in variable startPos`
			`setPosition(e); //get the new mouse position (it will be saved in pos.x and pos.y --> see function setPosition`
			`ctx.lineTo(pos.x,pos.y); //draw line to new mouse position`
			`ctx.stroke(); //this is the moment where the actual line is drawn`
			`socket.emit("picture", { //send data to the server`
update from Tuesday 9 months ago			`startPos,`
			`pos,`
			`color,`
			`lineWidth`
			`});`
init commit 10 months ago			`}`

comments 9 months ago			`socket.on("dingdong", (line) => { //browser received data from the server(other browser has drawn a line`
update from Tuesday 9 months ago			`console.log(line);`
			`ctx.lineWidth = line.lineWidth;`
			`ctx.strokeStyle = line.color;`
			`ctx.beginPath();`
			`ctx.moveTo(line.startPos.x, line.startPos.y);`
			`ctx.lineTo(line.pos.x, line.pos.y);`
			`ctx.stroke();`
init commit 10 months ago			`});`

			`</script>`