From 1b85aa713bf2e5acc36a6cc72f8de319ea0155d2 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 30 Jun 2023 16:03:56 +0200
Subject: [PATCH] fix: update canvas size on window resize

---
 packages/core/draw.mjs   | 8 ++++++++
 packages/core/spiral.mjs | 5 +++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/core/draw.mjs b/packages/core/draw.mjs
index f42e3220..5ea0c591 100644
--- a/packages/core/draw.mjs
+++ b/packages/core/draw.mjs
@@ -15,6 +15,14 @@ export const getDrawContext = (id = 'test-canvas') => {
     canvas.height = window.innerHeight;
     canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0';
     document.body.prepend(canvas);
+    let timeout;
+    window.addEventListener('resize', () => {
+      timeout && clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+      }, 200);
+    });
   }
   return canvas.getContext('2d');
 };
diff --git a/packages/core/spiral.mjs b/packages/core/spiral.mjs
index bba63e34..e0d5cd87 100644
--- a/packages/core/spiral.mjs
+++ b/packages/core/spiral.mjs
@@ -68,8 +68,9 @@ Pattern.prototype.spiral = function (options = {}) {
   } = options;
 
   function spiral({ ctx, time, haps, drawTime }) {
-    ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
-    const [cx, cy] = [ctx.canvas.width / 2, ctx.canvas.height / 2];
+    const [w, h] = [ctx.canvas.width, ctx.canvas.height];
+    ctx.clearRect(0, 0, w * 2, h * 2);
+    const [cx, cy] = [w / 2, h / 2];
     const settings = {
       margin: size / stretch,
       cx,