diff --git a/js/Canvas01.html b/js/Canvas01.html
new file mode 100644
index 0000000..a5402f5
--- /dev/null
+++ b/js/Canvas01.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <canvas id="meinBoard" width="400" height="400" style="border: 2px solid #333;"></canvas>
+
+  <script>
+    // 1. Den "Pinsel" (Kontext) holen
+    const canvas = document.getElementById('meinBoard');
+    const ctx = canvas.getContext('2d');
+
+    // Hier kommt gleich dein Code hin...
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/Canvas02.html b/js/Canvas02.html
new file mode 100644
index 0000000..3ce1a92
--- /dev/null
+++ b/js/Canvas02.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+  <canvas id="meinBoard" width="400" height="400" style="border: 2px solid #333;"></canvas>
+
+  <script>
+    // 1. Den "Pinsel" (Kontext) holen
+    const canvas = document.getElementById('meinBoard');
+    const ctx = canvas.getContext('2d');
+
+    // Farbe wählen
+    ctx.fillStyle = "orange";
+
+    // Rechteck zeichnen: fillRect(x, y, breite, höhe)
+    ctx.fillRect(50, 50, 150, 100);// Hier kommt gleich dein Code hin...
+  </script>
+</body>
+
+</html>
diff --git a/Mandelbrot.html b/js/Mandelbrot.html
similarity index 100%
rename from Mandelbrot.html
rename to js/Mandelbrot.html
