init commit

10 months ago · 93d03e0441
commit 93d03e0441
4 changed files with 117 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
+node_modules/*
+package-lock.json
--- a/index.js
+++ b/index.js
@ -0,0 +1,25 @@
+const express = require('express');
+const app = express();
+const http = require('http');
+const server = http.createServer(app);
+const { Server } = require("socket.io");
+const io = new Server(server);
+
+app.use(express.static('public'));
+
+io.on('connection', (socket) => {
+	console.log('a user connected');
+	
+	socket.on('draw', (line) => {
+		console.log(line);
+		socket.broadcast.emit("draw",line);
+	});
+	
+	socket.on('disconnect', () => {
+		console.log('user disconnected');
+	});
+});
+
+server.listen(3000, () => {
+	console.log('listening on *:3000');
+});
--- a/package.json
+++ b/package.json
@ -0,0 +1,9 @@
+{
+  "name": "collective drawing on canvas",
+  "version": "0.0.1",
+  "description": "lets draw together",
+  "dependencies": {
+    "express": "^4.18.2",
+    "socket.io": "^4.7.4"
+  }
+}
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<title>untitled</title>
+	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
+	<style>
+body{
+	margin: 0 auto;
+}		
+
+#drawing{
+	display: block;
+	margin-top: 100px;
+	margin-right: auto;
+	margin-left: auto;
+	border: 1px solid #000;
+	box-shadow: 0px 0px 10px #000;
+	
+}
+	</style>
+</head>
+
+<body>
+	<canvas id="drawing" width="400" height="400" ></canvas>
+	Width:<input type="range" min="1" max="20" value="5"  id="lineWidth">
+	Color:<input type="color" id="color" value="#000000" />
+</body>
+<script src="/socket.io/socket.io.js"></script>
+<script>
+var socket = io();
+
+var canvas = document.getElementById("drawing");
+
+var ctx = canvas.getContext('2d');
+	
+var pos = { x: 0, y: 0 };
+var lineWidth = 5;
+var color = "#000000";
+
+document.addEventListener('mousemove', draw);
+document.addEventListener('mousedown', setPosition);
+document.addEventListener('mouseenter', setPosition);
+
+function setPosition(e) {
+	pos.x = e.clientX - canvas.offsetLeft;
+	pos.y = e.clientY - canvas.offsetTop;
+}
+
+function draw(e) {
+	if (e.buttons !== 1) return;
+	ctx.beginPath();
+	ctx.lineWidth = lineWidth;
+	ctx.lineCap = 'round';
+	ctx.strokeStyle = color;
+	ctx.moveTo(pos.x, pos.y);
+	var oldpos = { x: pos.x, y: pos.y };
+	setPosition(e);
+	ctx.lineTo(pos.x, pos.y);
+	ctx.stroke(); 
+	socket.emit('draw', {oldpos, pos, lineWidth, color});
+}
+
+document.getElementById("lineWidth").addEventListener('change', function(){
+	lineWidth = this.value;
+});
+
+document.getElementById("color").addEventListener('change', function(){
+	color = this.value;
+});
+
+
+socket.on("draw", function(input){
+	ctx.lineWidth = input.lineWidth;
+	ctx.strokeStyle = input.color;
+	ctx.moveTo(input.oldpos.x, input.oldpos.y);
+	ctx.lineTo(input.pos.x, input.pos.y);
+	ctx.stroke(); 
+});
+</script>
+</html>