@import url("/assets/md.css")feat: figured i'd revisit this code i wrote as a shitpost, it seems quite decent actually

@import url("/assets/md.css")

1 files changed, 54 insertions, 0 deletions

diff --git a/src/routes/playground/canvas/+page.svelte b/src/routes/playground/canvas/+page.svelte
new file mode 100644
index 0000000..04127c1
--- /dev/null
+++ b/src/routes/playground/canvas/+page.svelte
@@ -0,0 +1,54 @@
+<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>