Merge pull request #631 from tidalcycles/fix-canvas-resize

fix: update canvas size on window resize
tidalcycles · Jun 30, 2023 · f078599 · f078599
2 parents fbc73bc + 1b85aa7
commit f078599
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git 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
@@ -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,