Canvas Design Skill

When to use

• Creating generative art and abstract compositions
• Designing visual assets with HTML Canvas or SVG
• Building data visualizations as art
• Creating unique brand assets and illustrations

Canvas setup

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio || 1;
canvas.width = 1200 * dpr;
canvas.height = 800 * dpr;
canvas.style.width = "1200px";
canvas.style.height = "800px";
ctx.scale(dpr, dpr);

Composition patterns

Grid-based generative

const cols = 12, rows = 8;
const cellW = 1200 / cols, cellH = 800 / rows;
for (let x = 0; x < cols; x++) {
  for (let y = 0; y < rows; y++) {
    ctx.save();
    ctx.translate(x * cellW + cellW / 2, y * cellH + cellH / 2);
    ctx.rotate(Math.random() * Math.PI);
    // Draw shape
    ctx.fillStyle = `hsl(${200 + Math.random() * 60}, 70%, ${50 + Math.random() * 20}%)`;
    ctx.fillRect(-cellW / 4, -cellH / 4, cellW / 2, cellH / 2);
    ctx.restore();
  }
}

Noise-based organic

// Use simplex/perlin noise for organic patterns
for (let x = 0; x < width; x += 2) {
  for (let y = 0; y < height; y += 2) {
    const n = noise(x * 0.005, y * 0.005);
    const hue = 200 + n * 60;
    ctx.fillStyle = `hsl(${hue}, 60%, ${40 + n * 30}%)`;
    ctx.fillRect(x, y, 2, 2);
  }
}

Export

// PNG
canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url; a.download = "artwork.png"; a.click();
}, "image/png");

// High-res: use 3x DPR for print-quality output

Design philosophy

• Constraint breeds creativity: Limit colors (3-5), shapes, and rules
• Randomness with structure: Random parameters within defined bounds
• Iteration: Generate many, curate the best
• Minimal text: Let the visual speak

Tips for AI Agents

• Ask about the desired mood, color palette, and output format.
• Generate multiple variations and let the user choose.
• Consider print resolution (300 DPI) for physical outputs.