Fix: cube window resize

pittica · Oct 30, 2021 · 7b9af36 · 7b9af36
1 parent 6e1716c
commit 7b9af36
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@pittica/gatsby-plugin-canvas-animations",
   "private": false,
   "description": "Canvas animations collection for GatsbyJS.",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "author": {
     "name": "Lucio Benini",
     "email": "info@pittica.com",

diff --git a/src/components/cube.jsx b/src/components/cube.jsx
@@ -13,12 +13,11 @@ export default function Cube({ color, background }) {
       canvas.width = canvas.parentNode.clientWidth
       canvas.height = canvas.parentNode.clientWidth
 
-      window.addEventListener("resize", () => {
-        canvas.width = canvas.parentNode.clientWidth
-        canvas.height = canvas.parentNode.clientWidth
+      window.addEventListener("resize", resize)
+
+      draw()
 
-        draw()
-      })
+      return () => window.removeEventListener("resize", resize)
     } else {
       canvas.width = 1920
       canvas.height = 1080
@@ -27,6 +26,15 @@ export default function Cube({ color, background }) {
     draw()
   }, [])
 
+  const resize = () => {
+    const canvas = ref.current
+
+    canvas.width = canvas.parentNode.clientWidth
+    canvas.height = canvas.parentNode.clientHeight
+
+    draw()
+  }
+
   const draw = () => {
     const canvas = ref.current