diff --git a/package.json b/package.json index 4372684..4f6ee5d 100644 --- 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 index 919aabb..a93f2aa 100644 --- 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