joak
/
collective-drawing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

comments

Browse Source
main
joak 10 months ago
parent d0547fb769
commit 024a616cdf
2 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File

12
index.js
Unescape Escape View File

@ -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');
});

64
public/index.html
Unescape Escape View File

@ -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;

Write Preview
Loading…
Cancel
Save