canvas-generativelisted
Install: claude install-skill leobbaroni/maestro
# 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