Tracely-ai: Skill for Claude Code

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.

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

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)

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	Smooth, grid-aligned bias, cheaper	Terrain, clouds, gentle organic textures
Simplex	No grid artifacts, better gradients, slightly costlier	Flow fields, organic motion, seamless tiling
Worley (Cellular)	Distance-to-nearest-point, cell-like	Voronoi patterns, caustics, cracks, cell textures

Usage rules:

• Always scale input coordinates (divide by a noiseScale factor) -- raw pixel coords produce visual noise
• Use octaves (fractal Brownian motion) for detail: sum multiple noise calls at increasing frequency and decreasing amplitude
• Seed your noise for reproducibility