Generative Studio — Since the first frame

Draw My Canvas.

Eight generative-art animations, drawn live in your browser from nothing but math and a canvas — no images, no video. Watch them fullscreen, or drop any one into your own page with a single line.

Open the catalogue How embedding works

Now drawing — flow field · 1,024 agents · 60 fps

Plates in the catalogue

60 fps

Real-time HTML canvas

Dependencies · vanilla JS

Free

To embed anywhere

Eight plates · rendered live

The Catalogue

Every tile below is a real animation running right now, not a screenshot. Open one to view it full-frame or grab its embed code.

Want the full grid with per-piece embed buttons? Visit the gallery →

Copy · paste · done

Put any plate on your page in one line.

01 / htmlA standalone iframe. No script tags, no build step, no framework — it works in any site, CMS or notebook.
02 / fitResponsive by default. Set any width and height; the animation scales to fill the frame.
03 / freeZero cost, offline-ready. Installable as a PWA and cached by a service worker, so it keeps running without a connection.

<iframe src="https://drawmycanvas.com/embed/quantum-fibonacci.html"
        width="100%" height="600"
        frameborder="0"></iframe>

Swap the plate name for any of the eight.

About the studio

Code is the brush; the canvas does the rest.

Draw My Canvas is a small experiment in generative art — patterns grown from simple rules rather than drawn by hand. Flow fields, golden-angle spirals, particle systems and L-systems each get their own plate, painted frame by frame on the HTML5 canvas at sixty frames a second.

There is no engine underneath and nothing to install — just a few hundred lines of vanilla JavaScript and the math that makes each pattern move. No cookies, no sign-up, no accounts.

A studio experiment by Dank Dev ↗ · Read how it works ↗

Under the hood

RenderHTML5 Canvas 2D
LanguageVanilla JS · ES6+
LooprequestAnimationFrame · 60fps
OfflineService Worker · PWA
RoutingStatic pages, clean URLs
DepsNone