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 07 / 14
paint.jschange 1/1
(() => {
  'use strict';
 
  const canvas = document.getElementById('paint-canvas');
  const ctx = canvas.getContext('2d');
  const wrap = document.getElementById('canvas-wrap');
  const ring = document.getElementById('cursor-ring');
 
  const brushBtn = document.getElementById('tool-brush');
  const eraserBtn = document.getElementById('tool-eraser');
  const sizeSlider = document.getElementById('size-slider');
  const sizeValue = document.getElementById('size-value');
  const brushDot = document.getElementById('brush-dot');
  const paletteEl = document.getElementById('palette');
  const customColorWrap = document.querySelector('.custom-color');
  const customColorInput = document.getElementById('custom-color-input');
  const customDot = document.getElementById('custom-dot');
  const undoBtn = document.getElementById('undo-btn');
  const redoBtn = document.getElementById('redo-btn');
  const clearBtn = document.getElementById('clear-btn');
  const saveBtn = document.getElementById('save-btn');
 
  const BG = '#ffffff';
  const MAX_HISTORY = 50;
  const PALETTE = [
    '#111827', '#6b7280', '#ffffff', '#ef4444', '#f97316', '#fbbf24',
    '#22c55e', '#0ea5e9', '#2563eb', '#7c3aed', '#ec4899', '#8b5a2b',
  ];
 
  const state = {
    tool: 'brush',
    color: PALETTE[0],
    sizes: { brush: 10, eraser: 28 },
  };
 
  let dpr = 1;
  let canvasReady = false;
  let drawing = false;
  let activePointer = null;
  let p0 = null;
  let p1 = null;
  let strokeW = state.sizes.brush;
 
  const undoStack = [];
  const redoStack = [];
 
  // ---------- Canvas sizing & snapshots ----------
 
  function snapshot() {
    const c = document.createElement('canvas');
    c.width = canvas.width;
    c.height = canvas.height;
    c.getContext('2d').drawImage(canvas, 0, 0);
    return { c, dpr };
  }
 
  // Repaints a snapshot in CSS-pixel space so content keeps its
  // on-screen size even if devicePixelRatio changed since capture.
  function paintSnapshot(snap) {
    ctx.fillStyle = BG;
    ctx.fillRect(0, 0, canvas.width / dpr, canvas.height / dpr);
    ctx.drawImage(snap.c, 0, 0, snap.c.width / snap.dpr, snap.c.height / snap.dpr);
  }
 
  function configureCtx() {
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
  }
 
  function resizeCanvas() {
    const rect = canvas.getBoundingClientRect();
    const newDpr = window.devicePixelRatio || 1;
    const w = Math.max(1, Math.round(rect.width * newDpr));
    const h = Math.max(1, Math.round(rect.height * newDpr));
    if (canvasReady && w === canvas.width && h === canvas.height) return;
 
    const prev = canvasReady ? snapshot() : null;
    canvas.width = w;
    canvas.height = h;
    dpr = newDpr;
    configureCtx();
    ctx.fillStyle = BG;
    ctx.fillRect(0, 0, w / dpr, h / dpr);
    if (prev) paintSnapshot(prev);
    canvasReady = true;
  }
 
  // ---------- History ----------
 
  function updateHistoryUI() {
    undoBtn.disabled = undoStack.length === 0;
    redoBtn.disabled = redoStack.length === 0;
  }
 
  function pushHistory() {
    undoStack.push(snapshot());
    if (undoStack.length > MAX_HISTORY) undoStack.shift();
    redoStack.length = 0;
    updateHistoryUI();
  }
 
  function undo() {
    if (!undoStack.length || drawing) return;
    redoStack.push(snapshot());
    paintSnapshot(undoStack.pop());
    updateHistoryUI();
  }
 
  function redo() {
    if (!redoStack.length || drawing) return;
    undoStack.push(snapshot());
    paintSnapshot(redoStack.pop());
    updateHistoryUI();
  }
 
  // ---------- Drawing ----------
 
  function getPoint(e) {
    const r = canvas.getBoundingClientRect();
    return {
      x: e.clientX - r.left,
      y: e.clientY - r.top,
      pressure: e.pointerType === 'pen' ? e.pressure : 1,
    };
  }
 
  function strokeColor() {
    return state.tool === 'eraser' ? BG : state.color;
  }
 
  function targetWidth(pt) {
    const base = state.sizes[state.tool];
    if (pt.pressure >= 1) return base;
    return Math.max(0.75, base * (0.3 + pt.pressure * 1.2));
  }
 
  function drawDot(pt, width) {
    ctx.fillStyle = strokeColor();
    ctx.beginPath();
    ctx.arc(pt.x, pt.y, width / 2, 0, Math.PI * 2);
    ctx.fill();
  }
 
  // Each segment is a quadratic curve between the midpoints of the last
  // three input points — this is what keeps fast strokes smooth instead
  // of polygonal.
  function drawSegment(pt) {
    const midPrevX = (p0.x + p1.x) / 2;
    const midPrevY = (p0.y + p1.y) / 2;
    const midCurX = (p1.x + pt.x) / 2;
    const midCurY = (p1.y + pt.y) / 2;
 
    ctx.strokeStyle = strokeColor();
    ctx.lineWidth = strokeW;
    ctx.beginPath();
    ctx.moveTo(midPrevX, midPrevY);
    ctx.quadraticCurveTo(p1.x, p1.y, midCurX, midCurY);
    ctx.stroke();
 
    p0 = p1;
    p1 = pt;
  }
 
  function finishStroke() {
    if (!drawing) return;
    // Complete the tail from the last midpoint to the final point.
    ctx.strokeStyle = strokeColor();
    ctx.lineWidth = strokeW;
    ctx.beginPath();
    ctx.moveTo((p0.x + p1.x) / 2, (p0.y + p1.y) / 2);
    ctx.lineTo(p1.x, p1.y);
    ctx.stroke();
 
    drawing = false;
    activePointer = null;
    p0 = p1 = null;
  }
 
  function onPointerDown(e) {
    if (drawing || e.button !== 0) return;
    drawing = true;
    activePointer = e.pointerId;
    canvas.setPointerCapture(e.pointerId);
    pushHistory();
 
    const pt = getPoint(e);
    p0 = p1 = pt;
    strokeW = targetWidth(pt);
    drawDot(pt, strokeW);
    e.preventDefault();
  }
 
  function onPointerMove(e) {
    moveRing(e);
    if (!drawing || e.pointerId !== activePointer) return;
 
    const events = typeof e.getCoalescedEvents === 'function' ? e.getCoalescedEvents() : [];
    if (events.length === 0) events.push(e);
 
    for (const ev of events) {
      const pt = getPoint(ev);
      const dx = pt.x - p1.x;
      const dy = pt.y - p1.y;
      if (dx * dx + dy * dy < 0.25) continue;
      strokeW += (targetWidth(pt) - strokeW) * 0.25;
      drawSegment(pt);
    }
  }
 
  function onPointerUp(e) {
    if (e.pointerId !== activePointer) return;
    finishStroke();
  }
 
  // ---------- Cursor ring ----------
 
  function sizeRing() {
    const d = state.sizes[state.tool];
    ring.style.width = d + 'px';
    ring.style.height = d + 'px';
    ring.classList.toggle('eraser', state.tool === 'eraser');
  }
 
  function moveRing(e) {
    if (e.pointerType === 'touch') {
      ring.style.display = 'none';
      return;
    }
    const r = wrap.getBoundingClientRect();
    ring.style.display = 'block';
    ring.style.left = (e.clientX - r.left) + 'px';
    ring.style.top = (e.clientY - r.top) + 'px';
  }
 
  function hideRing() {
    ring.style.display = 'none';
  }
 
  // ---------- Toolbar ----------
 
  function updateBrushPreview() {
    const size = state.sizes[state.tool];
    const d = Math.max(3, Math.min(size, 32));
    brushDot.style.width = d + 'px';
    brushDot.style.height = d + 'px';
    if (state.tool === 'eraser') {
      brushDot.style.background = '#ffffff';
      brushDot.style.border = '1px solid #94a3b8';
    } else {
      brushDot.style.background = state.color;
      brushDot.style.border = 'none';
    }
  }
 
  function setTool(tool) {
    state.tool = tool;
    brushBtn.classList.toggle('active', tool === 'brush');
    eraserBtn.classList.toggle('active', tool === 'eraser');
    brushBtn.setAttribute('aria-pressed', String(tool === 'brush'));
    eraserBtn.setAttribute('aria-pressed', String(tool === 'eraser'));
    sizeSlider.value = state.sizes[tool];
    sizeValue.textContent = state.sizes[tool];
    sizeRing();
    updateBrushPreview();
  }
 
  function setColor(color) {
    state.color = color.toLowerCase();
    let matched = false;
    for (const swatch of paletteEl.children) {
      const isMatch = swatch.dataset.color === state.color;
      swatch.classList.toggle('selected', isMatch);
      matched = matched || isMatch;
    }
    customColorWrap.classList.toggle('selected', !matched);
    customDot.style.background = state.color;
    updateBrushPreview();
  }
 
  function setSize(size) {
    const clamped = Math.max(1, Math.min(80, Math.round(size)));
    state.sizes[state.tool] = clamped;
    sizeSlider.value = clamped;
    sizeValue.textContent = clamped;
    sizeRing();
    updateBrushPreview();
  }
 
  function clearCanvas() {
    pushHistory();
    ctx.fillStyle = BG;
    ctx.fillRect(0, 0, canvas.width / dpr, canvas.height / dpr);
  }
 
  function savePNG() {
    const stamp = new Date().toISOString().slice(0, 19).replace(/[T:]/g, '-');
    const link = document.createElement('a');
    link.download = `inkpad-${stamp}.png`;
    link.href = canvas.toDataURL('image/png');
    link.click();
  }
 
  function buildPalette() {
    for (const color of PALETTE) {
      const swatch = document.createElement('button');
      swatch.className = 'swatch';
      swatch.dataset.color = color;
      swatch.style.background = color;
      swatch.title = color;
      swatch.setAttribute('aria-label', `Color ${color}`);
      swatch.addEventListener('click', () => {
        setColor(color);
        setTool('brush');
      });
      paletteEl.appendChild(swatch);
    }
  }
 
  // ---------- Wiring ----------
 
  canvas.addEventListener('pointerdown', onPointerDown);
  canvas.addEventListener('pointermove', onPointerMove);
  canvas.addEventListener('pointerup', onPointerUp);
  canvas.addEventListener('pointercancel', onPointerUp);
  canvas.addEventListener('pointerenter', moveRing);
  canvas.addEventListener('pointerleave', hideRing);
  canvas.addEventListener('contextmenu', (e) => e.preventDefault());
 
  brushBtn.addEventListener('click', () => setTool('brush'));
  eraserBtn.addEventListener('click', () => setTool('eraser'));
  sizeSlider.addEventListener('input', () => setSize(+sizeSlider.value));
  customColorInput.addEventListener('input', () => {
    setColor(customColorInput.value);
    setTool('brush');
  });
  undoBtn.addEventListener('click', undo);
  redoBtn.addEventListener('click', redo);
  clearBtn.addEventListener('click', clearCanvas);
  saveBtn.addEventListener('click', savePNG);
 
  window.addEventListener('keydown', (e) => {
    const mod = e.metaKey || e.ctrlKey;
    const key = e.key.toLowerCase();
 
    if (mod && key === 'z') {
      e.preventDefault();
      if (e.shiftKey) redo();
      else undo();
      return;
    }
    if (mod && key === 'y') {
      e.preventDefault();
      redo();
      return;
    }
    if (mod && key === 's') {
      e.preventDefault();
      savePNG();
      return;
    }
 
    if (e.target instanceof HTMLInputElement || mod) return;
    if (key === 'b') setTool('brush');
    else if (key === 'e') setTool('eraser');
    else if (e.key === '[') setSize(state.sizes[state.tool] - 2);
    else if (e.key === ']') setSize(state.sizes[state.tool] + 2);
  });
 
  new ResizeObserver(resizeCanvas).observe(wrap);
  window.addEventListener('resize', resizeCanvas);
 
  // ---------- Init ----------
 
  buildPalette();
  resizeCanvas();
  setColor(state.color);
  setTool('brush');
  updateHistoryUI();
})();
 
381 linesjs
Writes …/paint.js
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