fix: hydra canvas adjust to screen size

+ simplify hydra init (use getDrawContext)
+ make getDrawContext more versatile

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.width = window.innerWidth * pixelRatio;
-    canvas.height = window.innerHeight * scale;
+    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.width = window.innerWidth * pixelRatio;
-        canvas.height = window.innerHeight * scale;
+        canvas.height = window.innerHeight * pixelRatio;
       }, 200);
     });
   }
-  return canvas.getContext('2d');
+  return canvas.getContext(contextType);
 };
 
 Pattern.prototype.draw = function (callback, { from, to, onQuery } = {}) {

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);
   }
 }