← All Tools
Canvas Sketch Sandbox Generator🔒 100% local
Draw and export PNG. Privacy-first, no server uploads, no tracking.
Canvas Sketch Sandbox Generator: related tools
Prints the complete source for one of six generative canvas sketches: particles, flowfield, noise, lissajous, grid and shader. Type the sketch name and the full listing comes back as plain text with no dependencies, ready to paste into a blank page or a browser console. Nothing is drawn in the tool and no library is fetched; the code is the deliverable.
Canvas Sketch Sandbox: how to use it
- Type one of the six names - particles, flowfield, noise, lissajous, grid, shader - or the word random.
- Press Process.
- Copy the listing into an empty HTML file or the DevTools console on about:blank, then change one constant at a time.
Canvas Sketch Sandbox: worked example
gridbecomes# Generative grid / tiling
Deterministic tiling with a seeded random. Good for posters and covers, and it is trivially seed-reproducible.The real output then prints about 35 lines of runnable source plus a what to change first list.
shaderbecomes# WebGL fragment shader
When the CPU stops being enough: the whole image is one function evaluated per pixel, on the GPU.The shader listing includes both GLSL sources, the program setup and the render loop.
Canvas Sketch Sandbox: when to use it
- Learning canvas by editing a sketch that already runs instead of starting from an empty file.
- Getting a seeded tile pattern for a cover where the same seed has to reproduce the same image.
- Grabbing a minimal WebGL boilerplate when a per-pixel effect has to move off the CPU.
- Comparing generation techniques, since all six listings share the same requestAnimationFrame structure.
Canvas Sketch Sandbox: what it does not do
- Nothing is drawn here and no PNG is exported. The tool's own description mentions export, but this build only produces source text.
- Selection is a substring test over the six names, so the pre-filled example circle(50, 50, 25) matches nothing and prints the help text instead of code.
- Unrecognised input falls back to the help screen rather than an error, so a typo looks like a successful run.
- random picks with Date.now() modulo the number of sketches, so it can return the same sketch on two consecutive runs.
- The sketches assume a blank page: each appends a full-window canvas to document.body, which will cover whatever else is on the page.