reset canvas when pattern changes

+ rename noteroll -> punchcard

website/src/pages/learn/getting-started.mdx

@@ -28,7 +28,7 @@ Strudel however runs directly in your web browser, does not require any custom s
 The main place to actually make music with Strudel is the [Strudel REPL](https://strudel.tidalcycles.org/) ([what is a REPL?](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop)), but in these pages you will also encounter interactive "MiniREPLs" where you can listen to and edit Strudel patterns.
 Try clicking the play icon below:
 
-<MiniRepl client:idle tune={`s("bd sd").noteroll()`} drawTime={[0, 2]} />
+<MiniRepl client:idle tune={`s("bd sd").punchcard()`} drawTime={[0, 2]} />
 
 Then edit the text so it reads `s("bd sd cp hh")` and click the refresh icon.
 Congratulations, you have now live coded your first Strudel pattern!

website/src/pages/learn/mini-notation.mdx

@@ -51,12 +51,12 @@ If you do just want to get a regular string that is _not_ parsed as mini-notatio
 
 We can play more notes by separating them with spaces:
 
-<MiniRepl client:idle tune={`note("c e g").noteroll()`} drawTime={[0, 4]} />
+<MiniRepl client:idle tune={`note("c e g").punchcard()`} drawTime={[0, 4]} />
 
 Here, those four notes are squashed into one cycle, so each note is a quarter second long.
 Try adding or removing notes and notice how the tempo changes!
 
-<MiniRepl client:idle tune={`note("c d e f g a b").noteroll()`} drawTime={[0, 4]} />
+<MiniRepl client:idle tune={`note("c d e f g a b").punchcard()`} drawTime={[0, 4]} />
 
 Note that the overall duration of time does not change, and instead each note length descreases.
 This is a key idea, as it illustrates the 'Cycle' in TidalCycles!

website/src/pages/technical-manual/docs.mdx

@@ -29,10 +29,10 @@ add a mini repl with
 
 - `client:idle` is required to tell astro that the repl should be interactive, see [Client Directive](https://docs.astro.build/en/reference/directives-reference/#client-directives)
 - `tune`: be any valid pattern code
-- `drawTime`: time window for drawing. Use together with `.noteroll()`. Example:
+- `drawTime`: time window for drawing. Use together with `.punchcard()`. Example:
 
 ```jsx
-<MiniRepl client:idle tune={`note("a3 c#4 e4 a4").noteroll()`} drawTime={[0, 2]} />
+<MiniRepl client:idle tune={`note("a3 c#4 e4 a4").punchcard()`} drawTime={[0, 2]} />
 ```
 
 ## In-Source Documentation

website/src/repl/Repl.jsx

@@ -54,9 +54,10 @@ evalScope(
 export let loadedSamples = [];
 const presets = prebake();
 
-let drawContext;
+let drawContext, clearCanvas;
 if (typeof window !== 'undefined') {
   drawContext = getDrawContext();
+  clearCanvas = () => drawContext.clearRect(0, 0, drawContext.canvas.height, drawContext.canvas.width);
 }
 
 Promise.all([...modules, presets]).then((data) => {
@@ -209,6 +210,7 @@ export function Repl({ embedded = false }) {
   const handleShuffle = async () => {
     const { code, name } = getRandomTune();
     logger(`[repl] ✨ loading random tune "${name}"`);
+    clearCanvas();
     resetLoadedSamples();
     await prebake(); // declare default samples
     await evaluate(code, false);