From 5352d458eaf755a356ad041590b7846a7dd542fd Mon Sep 17 00:00:00 2001
From: maru21 <k.muhrer@gmail.com>
Date: Sat, 24 Aug 2024 21:11:48 +0200
Subject: [PATCH] initial commit

---
 word_display_story_fixed_alignment.html | 106 ++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 word_display_story_fixed_alignment.html
diff --git a/word_display_story_fixed_alignment.html b/word_display_story_fixed_alignment.html
new file mode 100644
index 0000000..9ee8321
--- /dev/null
+++ b/word_display_story_fixed_alignment.html
@@ -0,0 +1,106 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+            font-family: Arial, sans-serif;
+            background-color: #f0f0f0;
+        }
+
+        h1 {
+            margin-bottom: 20px;
+            color: #333;
+        }
+
+        #myCanvas {
+            background-color: #ffffff;
+            border-radius: 10px;
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        #pauseButton, #speedInput {
+            margin-top: 20px;
+            padding: 10px 20px;
+            font-size: 16px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+            transition: background-color 0.3s ease;
+        }
+
+        #pauseButton {
+            color: #fff;
+            background-color: #007bff;
+        }
+
+        #pauseButton:hover {
+            background-color: #0056b3;
+        }
+
+        #speedInput {
+            width: 100px;
+            text-align: center;
+        }
+
+    </style>
+</head>
+<body>
+
+<h1>HTML5 Canvas fillText()</h1>
+
+<canvas id="myCanvas" width="500" height="100" style="border:1px solid grey;">
+Sorry, your browser does not support canvas.
+</canvas>
+
+<input type="number" id="speedInput" value="200" min="50" max="1000" step="50"> ms
+<button id="pauseButton">Pause</button>
+
+<script>
+const canvas = document.getElementById("myCanvas");
+const ctx = canvas.getContext("2d");
+let string = "Es war einmal ein kleiner Fuchs namens Felix, der in einem friedlichen Wald lebte. Eines Tages entdeckte Felix einen geheimen Pfad, den er noch nie zuvor gesehen hatte. Neugierig, wohin dieser Pfad führen könnte, beschloss er, ihm zu folgen. Der Pfad führte tief in den Wald, vorbei an alten Bäumen und moosbedeckten Steinen. Plötzlich bemerkte Felix, dass die Bäume um ihn herum anfingen, in allen Farben des Regenbogens zu leuchten. Er war erstaunt, denn so etwas hatte er noch nie gesehen. Die Blätter der Bäume schimmerten in einem sanften Licht, und der Boden war mit funkelnden Blumen bedeckt, die bei jedem Schritt ein leises Glöckchen erklingen ließen. Felix wusste, dass er einen magischen Ort gefunden hatte. Er setzte sich auf eine Lichtung und beobachtete die leuchtenden Tiere, die durch den Wald huschten. Ein freundlicher Vogel mit goldenen Federn landete neben ihm und fragte: Was führt dich in unseren magischen Wald, kleiner Fuchs? Ich bin nur neugierig, antwortete Felix. Ich habe diesen Pfad entdeckt und wollte sehen, wohin er führt. Der Vogel lächelte. Du hast Glück, diesen Ort gefunden zu haben. Nicht jeder kann unseren Wald sehen. Es ist ein Ort der Ruhe und des Friedens, aber nur für diejenigen, die mit einem reinen Herzen kommen. Felix war gerührt. Er versprach, das Geheimnis des Waldes zu bewahren und kehrte schließlich auf den Pfad zurück, der ihn nach Hause führte. Von diesem Tag an wusste Felix, dass er immer einen Ort hatte, an den er zurückkehren konnte, wenn er Ruhe und Frieden brauchte. Und so lebte er glücklich weiter, in dem Wissen, dass der magische Wald immer da war, wenn er ihn brauchte.".split(" ");
+let c = 0;
+let delay = parseInt(document.getElementById("speedInput").value); // 200 milliseconds = 0.2 seconds
+let paused = false; // Flag to check if paused
+let timeoutId; // Store the timeout ID
+
+document.getElementById("pauseButton").addEventListener("click", function() {
+  paused = !paused; // Toggle pause state
+  this.textContent = paused ? "Resume" : "Pause"; // Change button text
+  if (!paused) {
+    displayWord(); // Resume word display if not paused
+  } else {
+    clearTimeout(timeoutId); // Clear the timeout if paused
+  }
+});
+
+document.getElementById("speedInput").addEventListener("change", function() {
+  delay = parseInt(this.value);
+});
+
+function displayWord() {
+  if (c < string.length && !paused) {
+    let word = string[c];
+    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+    ctx.font = "24px Arial";
+    ctx.textAlign = "center"; // Center the text horizontally
+    ctx.textBaseline = "middle"; // Center the text vertically
+    ctx.fillText(word, canvas.width / 2, canvas.height / 2); // Display the word at the center
+    c++;
+    timeoutId = setTimeout(displayWord, delay); // Store the timeout ID
+  }
+}
+
+displayWord(); // Start the process
+</script>
+
+</body>
+</html>
