Build a paint / drawing web app as a single page in this directory: index.html, style.c…

claude-codeclaude-fable-5 · 14 steps · 5m 14s · 3 filessession 72758294-109@agentsage

Build a paint / drawing web app as a single page in this directory: index.html, style.css, paint.js (vanilla JS, no deps, HTML canvas). Freehand brush with adjustable size and color, a color palette plus a custom color picker, an eraser, a clear-canvas button, undo/redo, and a "save as PNG" download. Show the current brush preview. Polished dark theme, responsive canvas. Make it feel good to draw on.

same matchclaude-code · 14 steps codex · 66 steps pi · 12 steps

compare in arena

step 03 / 14

index.htmlchange 1/1

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Inkpad — Paint</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="toolbar">
    <div class="brand">
      <span class="brand-dot"></span>
      <span class="brand-name">Inkpad</span>
    </div>
 
    <div class="sep"></div>
 
    <div class="group" role="group" aria-label="Tools">
      <button id="tool-brush" class="btn" title="Brush (B)" aria-label="Brush" aria-pressed="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9.06 11.9l8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08" />
          <path d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z" />
        </svg>
      </button>
      <button id="tool-eraser" class="btn" title="Eraser (E)" aria-label="Eraser" aria-pressed="false">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21" />
          <path d="M22 21H7" />
          <path d="m5 11 9 9" />
        </svg>
      </button>
    </div>
 
    <div class="sep"></div>
 
    <div class="group size-group" aria-label="Brush size">
      <div id="brush-preview" class="brush-preview" title="Brush preview">
        <span id="brush-dot"></span>
      </div>
      <input id="size-slider" type="range" min="1" max="80" value="10" aria-label="Brush size" />
      <span id="size-value" class="size-value">10</span>
    </div>
 
    <div class="sep"></div>
 
    <div class="group palette-group" aria-label="Colors">
      <div id="palette" class="palette"></div>
      <label class="custom-color" title="Custom color">
        <span id="custom-dot"></span>
        <input id="custom-color-input" type="color" value="#111827" aria-label="Custom color picker" />
      </label>
    </div>
 
    <div class="spacer"></div>
 
    <div class="group" role="group" aria-label="Actions">
      <button id="undo-btn" class="btn" title="Undo (Ctrl+Z)" aria-label="Undo" disabled>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9 14 4 9l5-5" />
          <path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11" />
        </svg>
      </button>
      <button id="redo-btn" class="btn" title="Redo (Ctrl+Shift+Z)" aria-label="Redo" disabled>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="m15 14 5-5-5-5" />
          <path d="M20 9H9.5a5.5 5.5 0 0 0 0 11H13" />
        </svg>
      </button>
      <button id="clear-btn" class="btn danger" title="Clear canvas" aria-label="Clear canvas">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M3 6h18" />
          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
          <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
          <path d="M10 11v6" />
          <path d="M14 11v6" />
        </svg>
      </button>
      <button id="save-btn" class="btn primary" title="Save as PNG (Ctrl+S)" aria-label="Save as PNG">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
          <path d="m7 10 5 5 5-5" />
          <path d="M12 15V3" />
        </svg>
      </button>
    </div>
  </header>
 
  <main id="canvas-wrap" class="canvas-wrap">
    <canvas id="paint-canvas"></canvas>
    <div id="cursor-ring" aria-hidden="true"></div>
  </main>
 
  <script src="paint.js"></script>
</body>
</html>
 

96 lineshtml

Writes …/index.html

Files at this step

drag the rail to scrub

Discussion

No comments yet. Start the discussion. Recorded by @agentsage.

#claude #claude-code #claude-fable-5 #css #graphics #html #javascript #quick #ui

paint

← all sessions