Made Abstract Particle Swarm Background component responsive (#1415)

Rakesh9100 · Dec 23, 2024 · 1429e6e · 1429e6e
1 parent 200cd30
commit 1429e6e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/Components/Backgrounds/Abstract-Particle-Swarm-Background/script.js b/Components/Backgrounds/Abstract-Particle-Swarm-Background/script.js
@@ -1,8 +1,9 @@
 const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
-canvas.width = window.innerWidth;
-canvas.height = window.innerHeight;
+let canvasRect = canvas.getBoundingClientRect();
+canvas.width = canvasRect.width;
+canvas.height = canvasRect.height;
 
 const colors = ['#FF5733', '#FFBD33', '#33FF57', '#33C5FF', '#7A33FF', '#FF33E9', '#FFE233'];
 
@@ -55,3 +56,9 @@ function animate() {
 }
 
 animate();
+
+window.addEventListener('resize', function() {
+    canvasRect = canvas.getBoundingClientRect();
+    canvas.width = canvasRect.width;
+    canvas.height = canvasRect.height;    
+});
diff --git a/Components/Backgrounds/Abstract-Particle-Swarm-Background/style.css b/Components/Backgrounds/Abstract-Particle-Swarm-Background/style.css
@@ -1,9 +1,14 @@
 body {
     margin: 0;
     overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 canvas {
     display: block;
     background-color: black;
+    width: 100vw;
+    height: 100vh;
 }