<script>
  import CanvasCopy from '$/lib/test/canvas/CanvasCopy.svelte';
  import CanvasImg from '$/lib/test/canvas/CanvasImg.svelte';
  import { resolve } from '$app/paths';
  let fixPaddingArtifacts = $state(false);
  let useBg = $state(true);
  let src = $state(resolve('/') + 'estrogen-half.png');
  let alt = $state('Favicon');
</script>

<h1 class="text-3xl">Canvas Playground</h1>

<p>
  Here's some fucking around with the HTML canvas element, initially mostly to
  do a funny bit of obscuring images as found in the DOM.
</p>

<h2 class="text-xl">Plain Img</h2>
<p>Normal image tag.</p>

<div class="rounded-2xl"><img {src} {alt} /></div>

<h2 class="text-xl">CanvasImg</h2>
<p>
  Simple <code>canvas</code>-based copying of the contents and converting to
  blob. Falls back to source image.
</p>
<div class="rounded-2xl"><CanvasImg {src} {alt} /></div>

<h2 class="text-xl">CanvasCopy</h2>
<p>
  A more involved technique, copying sections of the canvas source and rendering
  them in separate image elements, still falling back to source image.
</p>
<p>
  Single-pixel artifacts on high-dpi and non-1:1 scaled images can be solved by
  creating an overlapping pixel on each edge. This, however, messes up partial
  transparency.<br />
  <label
    ><input type="checkbox" bind:checked={fixPaddingArtifacts} /> Fix Artifacts</label
  >
  <label
    ><input type="checkbox" bind:checked={useBg} /> Use background-image to reduce
    element count</label
  >
</p>
<div class="rounded-2xl">
  <CanvasCopy
    {src}
    {alt}
    artifacts={fixPaddingArtifacts ? 'fix' : 'keep'}
    {useBg}
  />
</div>
