Canvas Snippets — Free HTML CSS JS Canvas Particle & Drawing Effects

The 2D canvas context is the right tool the moment you need more elements than the DOM can comfortably animate, or pixel-level control the DOM simply does not offer. These snippets cover both: particle fields and generative backgrounds where element count is the point, and drawing, signature and image-effect tools where reading and writing pixels is the point.

Every one keeps the render loop small and explicit — clear, update, draw — and handles the two details canvas demos usually skip: device-pixel-ratio scaling and cleaning up the animation frame.

The clear/update/draw loop

Every animated snippet here structures its requestAnimationFrame callback the same way: clear the canvas (or paint a translucent rectangle for a trailing effect), update the state of every particle or shape in plain JavaScript objects, then draw the result. Keeping those three phases separate is what makes a hundred-line particle system readable — the physics never gets tangled with the drawing calls.

Why canvas wins at high element counts

The DOM's cost scales with node count: a thousand animated divs means a thousand things the browser has to track for layout, style and paint. A canvas is one element regardless of how many particles it draws, because everything inside it is pixels the browser forgets the instant the frame is presented. That trade — no per-shape DOM cost, but no per-shape styling or hit-testing either — is the entire case for reaching for canvas over absolutely-positioned elements.

Pixel-level work with getImageData

The drawing and image-effect snippets read and write raw pixel data directly — colour picking from a click point, a threshold filter, a signature exported as a PNG. This is the one thing SVG and the DOM genuinely cannot do, and it is why tools like colour pickers and image filters live on canvas rather than as styled elements.

The two details that separate a demo from production code

A canvas has a CSS size and a separate backing-store pixel size; setting only the CSS size leaves retina screens blurry, so every snippet here multiplies both by devicePixelRatio and scales the context to match. And because requestAnimationFrame keeps calling itself indefinitely, every snippet stores the returned id and cancels it on teardown — skipping that step is the most common reason a "finished" canvas demo keeps burning CPU on a page nobody is looking at.