canvas-generative

# Canvas Generative > Algorithmic and generative art with Canvas 2D. > Concise rules here. Deep-dive and reference implementations in `references/`. --- ## Canvas 2D Setup ### DPR-Aware Sizing Every canvas must be sharp on Retina/HiDPI displays. Set the buffer size to the physical pixel size, scale down with CSS. ```js function setupCanvas(canvas, width, height) { const dpr = window.devicePixelRatio || 1; canvas.width = width * dpr; canvas.height = height * dpr; canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; const ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr); return ctx; } ``` ### Resize Handler ```js function handleResize(canvas, ctx, draw) { const ro = new ResizeObserver(([entry]) => { const { width, height } = entry.contentRect; const dpr = window.devicePixelRatio || 1; canvas.width = width * dpr; canvas.height = height * dpr; ctx.scale(dpr, dpr); draw(); // re-render after resize }); ro.observe(canvas.parentElement); return () => ro.disconnect(); } ``` ### Animation Loop (RAF) ```js let animId; let prevTime = 0; function loop(time) { const dt = Math.min((time - prevTime) / 1000, 0.1); // cap delta to avoid spiral of death prevTime = time; update(dt); render(ctx); animId = requestAnimationFrame(loop); } // Start animId = requestAnimationFrame(loop); // Stop cancelAnimationFrame(animId); ``` --- ## Noise | Type | Characteristics | Best For | |---|---|---| | Perlin | Smo...