<script lang="ts">
    import { onMount, setContext } from "svelte";

  let canvas;

  // what do i want?
  // lets start with an image of my potato
  // then get it to move
  // then have many displayed in an offset grid

  const drawFunctions = [];


  setContext('canvas', {
    register(drawFn) {
      drawFunctions.push(drawFn);
    },
    unregister(drawFn) {
      drawFunctions.splice(drawFunctions.indexOf(drawFn), 1);
    }
  })

  onMount(() => {
    // not sure what this does...
    const ctx = canvas.getContext('2d');

    // no idea what this does...
    function update() {

      ctx.clearRect()
      drawFunctions.forEach(drawFn => {
        drawFn(ctx);
      });

      frameId = requestAnimationFrame(update);
    }

    let frameId = requestAnimationFrame(update);
    return () => {
      cancelAnimationFrame(update);
    };
  });
</script>

<canvas bind:this={canvas} />
