Untitled

<style>
body  { font-family: Arial; }
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  border-spacing: 5px;
}
#container {
  position: relative;
}
#container canvas, #overlay {
  position: absolute;
}
canvas {
}
</style>

<script>
function load() {
	const canvas = document.getElementById('xxx');

	canvas.width = 1920;
	canvas.height = 1080;

	const c = canvas.getContext('2d');

	const width = 300;
	const height = 300;

	let angle = Math.random() * Math.PI * 2;
	let x = 50;
	let y = 100;
	function drawIt() {
		window.requestAnimationFrame(drawIt);

		let change =2 ;
		x += Math.cos(angle) * change;
		y += Math.sin(angle) * change;

		if (x >= width) {
			x = width - 1;
			angle = Math.PI - angle;
		} else if (x < 0) {
			x = 0;
			angle = Math.PI - angle;
		} else if (y >= height) {
			y = height - 1;
			angle = (Math.PI * 2) - angle;
		} else if (y < 0) {
			y = 0;
			angle = (Math.PI * 2) - angle;
		}

		c.fillStyle = "rgba(255, 255, 255, 0.05)";
		c.fillRect(0, 0, canvas.width, canvas.height);

		c.fillStyle = "red";
		c.beginPath();
		c.arc(x,y,10,10, 0, Math.PI * 2);
		c.fill();
	}

	drawIt();
}
</script>

<body onload="load()">

<div id="container">
<canvas id="xxx"></canvas>
<div id="overlay">


<?php
$connection = new mysqli("localhost", "root", "", "lista_gosci");
if ($connection->connect_error) {
    die("Connection failed: " . $connection->connect_error);
}

$guest_list = $connection->query("SELECT name, des FROM abc123");
if ($guest_list->num_rows > 0) {
	echo("<table>");
	echo("<tr><th>Osoba</th><th>Komentarz</th></tr>");
    while ($entry = $guest_list->fetch_assoc()) {
        echo("<tr><td>" . $entry["name"]. "</td><td>" . $entry["des"]. "</td></tr>");
    }
	echo("</table>");
} else {
	echo("Brak wpisów.");
}
?>

<br><br>

<form action="add.php" method="post">
Imię i nazwisko: <input type="text" name="name"><br>
Komentarz: <input type="text" name="comment"><br>
<input type="submit">
</form>

</div>
</div>
</body>