handwriting_capture_tool.html

<h2 class="sr-only">Handwriting capture tool: draw each character on a canvas and export the pen strokes as a JSON font file</h2>
<div style="display:flex; flex-direction:column; gap:12px;">

  <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
    <span style="font-size:14px; color:var(--text-secondary);">Character</span>
    <div id="charDisplay" style="width:36px; height:36px; border:0.5px solid var(--border-strong); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:500;">a</div>
    <button id="prevBtn"><i class="ti ti-chevron-left" aria-hidden="true"></i></button>
    <button id="nextBtn"><i class="ti ti-chevron-right" aria-hidden="true"></i></button>
    <span id="progress" style="font-size:13px; color:var(--text-muted); margin-left:4px;">1 / 62</span>
    <span style="flex:1;"></span>
    <button id="clearBtn"><i class="ti ti-eraser" aria-hidden="true"></i> Clear</button>
  </div>

  <div style="background:var(--surface-1); border-radius:12px; padding:12px;">
    <canvas id="canvas" width="600" height="300" style="width:100%; height:auto; display:block; background:var(--surface-2); border:0.5px solid var(--border); border-radius:var(--radius); touch-action:none; cursor:crosshair;"></canvas>
  </div>

  <div style="display:flex; gap:8px; flex-wrap:wrap;">
    <button id="undoStroke"><i class="ti ti-arrow-back-up" aria-hidden="true"></i> Undo stroke</button>
    <button id="saveNext" style="border-color:var(--border-accent); color:var(--text-accent);"><i class="ti ti-check" aria-hidden="true"></i> Save and next</button>
    <button id="skipBtn">Skip</button>
    <span style="flex:1;"></span>
    <button id="exportBtn"><i class="ti ti-download" aria-hidden="true"></i> Export JSON</button>
  </div>

  <div style="font-size:13px; color:var(--text-secondary); line-height:1.6;">
    Draw the character naturally, mouse or touch. Each pen-down to pen-up is recorded as one stroke (ordered x,y points). Saved: <span id="savedCount" style="font-weight:500; color:var(--text-primary);">0</span> / 62
  </div>
</div>

<script>
const CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");
let idx = 0;
let strokes = {};
let currentStrokes = [];
let drawing = false;
let curStroke = [];

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const charDisplay = document.getElementById('charDisplay');
const progress = document.getElementById('progress');
const savedCount = document.getElementById('savedCount');

function isDark() {
  return getComputedStyle(document.documentElement).getPropertyValue('--surface-2').trim().toLowerCase() !== '#ffffff';
}

function redraw() {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';
  ctx.lineWidth = 3;
  ctx.strokeStyle = isDark() ? '#e8e6df' : '#1a1a18';
  for (const s of currentStrokes) {
    if (s.length < 2) continue;
    ctx.beginPath();
    ctx.moveTo(s[0][0], s[0][1]);
    for (let i=1;i<s.length;i++) ctx.lineTo(s[i][0], s[i][1]);
    ctx.stroke();
  }
}

function updateHeader() {
  charDisplay.textContent = CHARS[idx];
  progress.textContent = (idx+1) + " / " + CHARS.length;
  savedCount.textContent = Object.keys(strokes).length;
  currentStrokes = strokes[CHARS[idx]] ? JSON.parse(JSON.stringify(strokes[CHARS[idx]])) : [];
  redraw();
}

function getPos(e) {
  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;
  const cx = (e.touches ? e.touches[0].clientX : e.clientX);
  const cy = (e.touches ? e.touches[0].clientY : e.clientY);
  return [Math.round((cx - rect.left) * scaleX), Math.round((cy - rect.top) * scaleY)];
}

function start(e) {
  e.preventDefault();
  drawing = true;
  curStroke = [getPos(e)];
}
function move(e) {
  if (!drawing) return;
  e.preventDefault();
  const p = getPos(e);
  curStroke.push(p);
  currentStrokes.push(curStroke);
  redraw();
  currentStrokes.pop();
  ctx.beginPath();
  ctx.moveTo(curStroke[curStroke.length-2][0], curStroke[curStroke.length-2][1]);
  ctx.lineTo(p[0], p[1]);
  ctx.stroke();
}
function end(e) {
  if (!drawing) return;
  drawing = false;
  if (curStroke.length > 1) currentStrokes.push(curStroke);
  curStroke = [];
  redraw();
}

canvas.addEventListener('mousedown', start);
canvas.addEventListener('mousemove', move);
window.addEventListener('mouseup', end);
canvas.addEventListener('touchstart', start);
canvas.addEventListener('touchmove', move);
canvas.addEventListener('touchend', end);

document.getElementById('undoStroke').onclick = () => { currentStrokes.pop(); redraw(); };
document.getElementById('clearBtn').onclick = () => { currentStrokes = []; redraw(); };

document.getElementById('prevBtn').onclick = () => { idx = (idx-1+CHARS.length)%CHARS.length; updateHeader(); };
document.getElementById('nextBtn').onclick = () => { idx = (idx+1)%CHARS.length; updateHeader(); };
document.getElementById('skipBtn').onclick = () => { idx = (idx+1)%CHARS.length; updateHeader(); };

document.getElementById('saveNext').onclick = () => {
  strokes[CHARS[idx]] = JSON.parse(JSON.stringify(currentStrokes));
  idx = (idx+1)%CHARS.length;
  updateHeader();
};

document.getElementById('exportBtn').onclick = () => {
  strokes[CHARS[idx]] = JSON.parse(JSON.stringify(currentStrokes));
  const data = JSON.stringify({canvas:{width:canvas.width,height:canvas.height}, glyphs:strokes}, null, 2);
  const blob = new Blob([data], {type:'application/json'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'handwriting_font.json';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
};

updateHeader();
</script>