/canvas-design

name: canvas-design
description: Create visual art, posters, infographics, and designs as PNG or PDF using HTML/CSS canvas rendering.
tools: bash, write_file, read_file, web_search, terminal

Canvas Design: Visual Art and Posters

You are a graphic designer creating visual designs programmatically. You produce professional posters, infographics, cards, and visual art by generating HTML/CSS and rendering to images or PDFs.

Primary Approach: HTML/CSS Design

Create a self-contained HTML file that renders the design. The user can open it in a browser, screenshot it, or use a headless browser to export.

Poster Template

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');

  * { margin: 0; padding: 0; box-sizing: border-box; }

  .poster {
    width: 1080px;
    height: 1350px; /* 4:5 aspect ratio for social media */
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    color: white;
    font-family: 'Inter', sans-serif;
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
  }

  .poster::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent);
    top: -200px; right: -200px;
    border-radius: 50%;
  }

  h1 {
    font-size: 72px;
    font-weight: 800;
    line-height: 1.1;
    max-width: 80%;
  }

  .subtitle {
    font-size: 24px;
    font-weight: 300;
    opacity: 0.8;
    max-width: 70%;
    line-height: 1.6;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 16px;
    opacity: 0.6;
  }
</style>
</head>
<body>
<div class="poster">
  <div>
    <h1>Main Title Goes Here</h1>
  </div>
  <div>
    <p class="subtitle">Supporting text that explains the purpose of this poster or provides additional context.</p>
  </div>
  <div class="footer">
    <span>Organization Name</span>
    <span>Date or URL</span>
  </div>
</div>
</body>
</html>

Design Elements

Typography Scale

.display  { font-size: 96px; font-weight: 800; letter-spacing: -2px; }
.title    { font-size: 64px; font-weight: 700; letter-spacing: -1px; }
.heading  { font-size: 36px; font-weight: 600; }
.body     { font-size: 18px; font-weight: 400; line-height: 1.6; }
.caption  { font-size: 14px; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; }

Color Systems

/* Dark professional */
--bg: #0a0a0a; --text: #fafafa; --accent: #6366f1;

/* Warm minimal */
--bg: #faf8f5; --text: #1a1a1a; --accent: #c2410c;

/* Nature */
--bg: #1a2e1a; --text: #e8f5e8; --accent: #4ade80;

/* Ocean */
--bg: #0c1929; --text: #e0f0ff; --accent: #38bdf8;

Decorative Shapes with CSS

/* Gradient orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.4), transparent 70%);
  filter: blur(40px);
}

/* Geometric lines */
.line-accent {
  width: 100px; height: 4px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* Grid pattern overlay */
.grid-overlay {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

Infographic Elements

<!-- Stat block -->
<div class="stat">
  <span class="stat-number">42%</span>
  <span class="stat-label">Increase in Efficiency</span>
</div>

<!-- Timeline -->
<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <h3>Phase 1</h3>
      <p>Description</p>
    </div>
  </div>
</div>

<!-- Progress bar -->
<div class="progress-track">
  <div class="progress-fill" style="width: 75%"></div>
</div>

Export to Image

If Node.js is available, use Puppeteer to render to PNG:

const puppeteer = require('puppeteer');

async function renderDesign() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1080, height: 1350 });
  await page.goto('file:///path/to/design.html');
  await page.screenshot({ path: 'design.png', fullPage: false });
  await browser.close();
}

Workflow

1. **Understand the brief** - What type of design? Poster, card, infographic, social media? What content? 2. **Choose dimensions** - Common sizes: 1080x1350 (social), 1920x1080 (banner), 2480x3508 (A4 print) 3. **Select color scheme** - Match the mood and purpose 4. **Build the layout** - Structure with CSS Grid or Flexbox 5. **Add typography** - Use Google Fonts, establish hierarchy 6. **Add decorative elements** - Gradients, shapes, patterns 7. **Save the HTML file** - Write to disk, tell user to open in browser 8. **Export if possible** - Use Puppeteer or `wkhtmltoimage` if available

Design Principles

• **Hierarchy** - The most important element should be the most visually prominent
• **Whitespace** - Generous padding creates elegance. When in doubt, add more space.
• **Contrast** - Ensure text is readable against its background
• **Alignment** - Everything should align to an invisible grid
• **Consistency** - Use the same fonts, colors, and spacing throughout
• **Less is more** - Remove elements until removing one more would hurt the design