From d5ed0650111dd8d6bc6c1d3cf0e44f0d248def6e Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sun, 3 Mar 2024 22:50:51 +0100
Subject: [PATCH] fix: hydra canvas adjust to screen size + simplify hydra init
 (use getDrawContext) + make getDrawContext more versatile

---
 packages/canvas/draw.mjs | 15 ++++++++-------
 packages/hydra/hydra.mjs | 21 +++++++++------------
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/packages/canvas/draw.mjs b/packages/canvas/draw.mjs
index b03634c5..20bf7fd6 100644
--- a/packages/canvas/draw.mjs
+++ b/packages/canvas/draw.mjs
@@ -6,26 +6,27 @@ This program is free software: you can redistribute it and/or modify it under th
 
 import { Pattern, getTime, State, TimeSpan } from '@strudel/core';
 
-export const getDrawContext = (id = 'test-canvas') => {
+export const getDrawContext = (id = 'test-canvas', options) => {
+  let { contextType = '2d', pixelated = false, pixelRatio = window.devicePixelRatio } = options || {};
   let canvas = document.querySelector('#' + id);
   if (!canvas) {
-    const scale = window.devicePixelRatio || 1;
     canvas = document.createElement('canvas');
     canvas.id = id;
-    canvas.width = window.innerWidth * scale;
-    canvas.height = window.innerHeight * scale;
+    canvas.width = window.innerWidth * pixelRatio;
+    canvas.height = window.innerHeight * pixelRatio;
     canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0';
+    pixelated && (canvas.style.imageRendering = 'pixelated');
     document.body.prepend(canvas);
     let timeout;
     window.addEventListener('resize', () => {
       timeout && clearTimeout(timeout);
       timeout = setTimeout(() => {
-        canvas.width = window.innerWidth * scale;
-        canvas.height = window.innerHeight * scale;
+        canvas.width = window.innerWidth * pixelRatio;
+        canvas.height = window.innerHeight * pixelRatio;
       }, 200);
     });
   }
-  return canvas.getContext('2d');
+  return canvas.getContext(contextType);
 };
 
 Pattern.prototype.draw = function (callback, { from, to, onQuery } = {}) {
diff --git a/packages/hydra/hydra.mjs b/packages/hydra/hydra.mjs
index b7912446..17830d81 100644
--- a/packages/hydra/hydra.mjs
+++ b/packages/hydra/hydra.mjs
@@ -2,15 +2,6 @@ import { getDrawContext } from '@strudel/canvas';
 
 let latestOptions;
 
-function appendCanvas(c) {
-  const { canvas: testCanvas } = getDrawContext();
-  c.canvas.id = 'hydra-canvas';
-  c.canvas.style.position = 'fixed';
-  c.canvas.style.top = '0px';
-  testCanvas.after(c.canvas);
-  return testCanvas;
-}
-
 export async function initHydra(options = {}) {
   // reset if options have changed since last init
   if (latestOptions && JSON.stringify(latestOptions) !== JSON.stringify(options)) {
@@ -19,12 +10,19 @@ export async function initHydra(options = {}) {
   latestOptions = options;
   //load and init hydra
   if (!document.getElementById('hydra-canvas')) {
-    console.log('reinit..');
     const {
       src = 'https://unpkg.com/hydra-synth',
       feedStrudel = false,
+      contextType = 'webgl',
+      pixelRatio = 1,
+      pixelated = true,
       ...hydraConfig
-    } = { detectAudio: false, ...options };
+    } = {
+      detectAudio: false,
+      ...options,
+    };
+    const { canvas } = getDrawContext('hydra-canvas', { contextType, pixelRatio, pixelated });
+    hydraConfig.canvas = canvas;
 
     await import(/* @vite-ignore */ src);
     const hydra = new Hydra(hydraConfig);
@@ -33,7 +31,6 @@ export async function initHydra(options = {}) {
       canvas.style.display = 'none';
       hydra.synth.s0.init({ src: canvas });
     }
-    appendCanvas(hydra);
   }
 }