add docs + fix hydra for mini repl

packages/hydra/README.md

@@ -1,3 +1,29 @@
 # @strudel/hydra
 
 This package integrates [hydra-synth](https://www.npmjs.com/package/hydra-synth) into strudel.
+
+## Usage in Strudel
+
+This package is imported into strudel by default. To activate Hydra, place this code at the top of your code:
+
+```js
+await initHydra();
+```
+
+Then you can use hydra below!
+
+## Usage via npm
+
+```sh
+npm i @strudel/hydra
+```
+
+Then add the import to your evalScope:
+
+```js
+import { evalScope } from '@strudel.cycles/core';
+
+evalScope(
+  import('@strudel/hydra')
+)
+```

packages/hydra/hydra.mjs

@@ -1,7 +1,9 @@
+import { getDrawContext } from '@strudel.cycles/core';
+
 export async function initHydra() {
   if (!document.getElementById('hydra-canvas')) {
+    const { canvas: testCanvas } = getDrawContext();
     await import('https://unpkg.com/hydra-synth');
-    const testCanvas = document.getElementById('test-canvas');
     const hydraCanvas = testCanvas.cloneNode(true);
     hydraCanvas.id = 'hydra-canvas';
     testCanvas.after(hydraCanvas);