diff options
Diffstat (limited to 'src/routes/playground')
| -rw-r--r-- | src/routes/playground/canvas/+page.svelte | 54 |
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> |