comments

9 months ago · 024a616cdf
parent d0547fb769
commit 024a616cdf
2 changed files with 38 additions and 38 deletions
--- a/index.js
+++ b/index.js
@ -7,12 +7,12 @@ const io = new Server(server);

 app.use(express.static('public'));

-io.on('connection', (socket) => {
-	console.log('a user connected');
+io.on('connection', (socket) => {          
+	console.log('a user connected');            //console log if a user connceted
 	
-	socket.on('picture', (line) => {
-		console.log(line);
-		socket.broadcast.emit("dingdong",line);
+	socket.on('picture', (line) => {            //if the message "picture" comes it will do this function. the message is called line
+		console.log(line);                      //logs the incoming message called line
+		socket.broadcast.emit("dingdong",line); //it broadcasts it to the other connected clients https://socket.io/docs/v4/tutorial/step-5
 	});

 	socket.on('disconnect', () => {
@ -20,6 +20,6 @@ io.on('connection', (socket) => {
 	});
 });

-server.listen(3000, () => {
+server.listen(3000, () => {                     //if you would like to change the port change the number        
 	console.log('listening on *:3000');
 });
--- a/public/index.html
+++ b/public/index.html
@ -14,7 +14,7 @@
 </head>
 <body>
 	<h1 class="center">drawing editor</h1>
-	<canvas id="drawing" width="400" height="400"></canvas><br>
+	<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">
@ -25,46 +25,46 @@
 </body>
 <script src="/socket.io/socket.io.js"></script>
 <script>
-var socket = io();
+var socket = io();     //starts socket.io
 	
 	
-var lineWidth = 1;
-var color = "#000000";
-var brush = "square";
-document.getElementById("linecap").addEventListener('change', function(){
-	brush = this.value;
+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(){
-	color = this.value;
+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(){
-	lineWidth = this.value;
+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");
-var ctx = canvas.getContext('2d');
-var pos = {x: 0, y: 0};
+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);
-document.addEventListener('mousedown', setPosition);
+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;
-	pos.y = e.clientY - canvas.offsetTop;
+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;
-	ctx.lineWidth = lineWidth;
-	ctx.lineCap = brush;
-	ctx.strokeStyle = color;
-	ctx.beginPath();
-	ctx.moveTo(pos.x,pos.y);
-	var startPos = {x: pos.x, y: pos.y};
-	setPosition(e);
-	ctx.lineTo(pos.x,pos.y);
-	ctx.stroke();
-	socket.emit("picture", {
+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, 
@ -72,7 +72,7 @@ function draw(e){
 	});
 }

-socket.on("dingdong", (line) => {
+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;