Draw My Canvas / studio

About & how it works

Draw My Canvas is a small studio of generative-art animations — patterns grown from a handful of rules and painted live in your browser, with no images, no video and no libraries. Here is what that means and how it fits together.

What generative art is

Generative art is art you describe rather than draw. Instead of placing every pixel by hand, you write a short set of rules — an angle to turn by, a way for particles to move, a branch that splits into two — and let the computer follow them. Small rules, repeated thousands of times, produce structure far richer than anyone would draw directly: spirals, forests, waves, rain.

Because a little randomness is folded in, the output is never quite the same twice. Each of the eight pieces here is one such rule set, running forever and never repeating.

How a canvas animation works

Every piece is drawn on an HTML5 canvas — a blank rectangle you can paint on from JavaScript. Animation comes from a loop built on requestAnimationFrame, the browser’s way of saying “I’m about to paint the next frame, do your drawing now.” Roughly sixty times a second the code nudges every point forward a step and redraws it, which your eye reads as smooth motion.

Two small techniques do most of the visual work. First, several pieces never fully clear the screen — they paint a nearly-transparent panel over the last frame, so moving points leave a soft, fading trail instead of a hard dot. Second, the canvas is scaled to the device’s pixel ratio, so the lines stay crisp on a phone’s retina display as well as a monitor. That is the entire engine: a loop, some math, and a fade.

The eight algorithms

Each plate is one idea. Open any of them to watch it full-frame and read what drives it:

Built to be light and honest

The whole site is a few hundred lines of vanilla JavaScript — no React, no canvas library, no analytics-heavy trackers. Pages are plain static HTML with clean URLs, the fonts are bundled with the site rather than pulled from a third party, and everything is cached for offline use as a Progressive Web App.

The only thing we measure is anonymous, cookieless page counts through GoatCounter, so we can tell which pieces people like. No accounts, no personal data, no cross-site tracking. That’s it.

Render

HTML5 Canvas 2D

Every frame drawn from math — never an image or a video file.

Code

Vanilla JS · ES6+

No frameworks and zero runtime dependencies.

Offline

Installable PWA

A service worker caches pages so they keep running with no connection.

Embed

One-line iframe

Drop any piece into any site, CMS or notebook — free, forever.

Questions

Frequently asked

Is Draw My Canvas free to use?

Yes. Every animation is free to watch and free to embed on your own site — personal or commercial. There is nothing to buy and no account to create.

How do I embed an animation on my website?

Open any piece in the gallery and copy its one-line iframe snippet, or use the Copy embed button on each gallery card. Paste that iframe into any HTML page, CMS block or notebook — no script tags, no build step.

Do the animations use any images or video?

No. Every frame is drawn from math on an HTML5 canvas, so there are no image or video files. That is what keeps each piece tiny, sharp at any size, and different every time it runs.

Does it work offline?

Yes. Draw My Canvas is a Progressive Web App: a service worker caches the pages so, once visited, they keep running without a connection, and the site can be installed to your home screen.

Do you track visitors?

Only privacy-friendly, aggregate page counts via GoatCounter. There are no cookies, no accounts, no cross-site tracking and no personal data — just anonymous totals so we know which pieces people enjoy.

Which browsers are supported?

Any modern browser with HTML5 canvas support — recent Chrome, Firefox, Safari and Edge on desktop and mobile. Animations respect the prefers-reduced-motion accessibility setting.

A studio experiment by Dank Dev ↗. Ready to look? Browse the gallery →