---
layout: default
title: Signature Pad - Shivering Playground
description: Draw, animate, and download your signature with playback controls
---

<style>
  .demo-wrapper {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
  }

  .demo-wrapper h1 {
    color: var(--text-primary);
    margin-bottom: 10px;
  }

  .demo-wrapper .subtitle {
    color: var(--text-secondary);
    margin-bottom: 30px;
  }

  .back-link {
    display: inline-block;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1em;
    margin-bottom: 20px;
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s ease;
  }

  .back-link:hover {
    background: var(--primary);
    color: white;
  }

  .signature-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
  }

  .canvas-wrapper {
    background: white;
    border: 2px solid var(--border);
    border-radius: 8px;
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    position: relative;
  }

  #signature-canvas,
  #playback-canvas {
    display: block;
    touch-action: none;
    cursor: crosshair;
  }

  #playback-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
  }

  .controls {
    margin-top: 1.5rem;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }

  .control-group {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    background: var(--background);
    border-radius: 6px;
    border: 1px solid var(--border);
  }

  .control-group label {
    color: var(--text-primary);
    font-size: 0.9em;
    white-space: nowrap;
  }

  .control-group input[type="color"] {
    width: 40px;
    height: 40px;
    border: 2px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
  }

  .control-group input[type="range"] {
    width: 120px;
  }

  .width-preview {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .width-preview span {
    background: var(--text-primary);
    border-radius: 50%;
    display: block;
  }

  .btn {
    padding: 10px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95em;
    transition: all 0.2s ease;
    font-weight: 500;
  }

  .btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }

  .btn:active {
    transform: translateY(0);
  }

  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  .btn-secondary {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
  }

  .btn-danger {
    background: #e74c3c;
  }

  .save-menu {
    position: relative;
    display: inline-block;
  }

  .save-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 200px;
  }

  .save-dropdown.show {
    display: block;
  }

  .save-option {
    padding: 12px 16px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.2s ease;
    border-bottom: 1px solid var(--border);
  }

  .save-option:last-child {
    border-bottom: none;
  }

  .save-option:hover {
    background: var(--background);
  }

  .save-option svg {
    margin-right: 8px;
    vertical-align: middle;
  }

  .gallery-section {
    margin-top: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
  }

  .gallery-section h3 {
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
  }

  .gallery-item {
    position: relative;
    background: white;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  .gallery-item img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    display: block;
  }

  .gallery-item-actions {
    display: flex;
    gap: 5px;
    margin-top: 8px;
  }

  .gallery-item-btn {
    flex: 1;
    padding: 6px 10px;
    font-size: 0.85em;
    background: var(--background);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .gallery-item-btn:hover {
    background: var(--primary);
    color: white;
  }

  .gallery-item-btn.delete {
    background: #e74c3c;
    color: white;
  }

  .gallery-download-menu {
    position: relative;
  }

  .gallery-download-dropdown {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 180px;
  }

  .gallery-download-dropdown.show {
    display: block;
  }

  .gallery-download-option {
    padding: 10px 12px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.2s ease;
    border-bottom: 1px solid var(--border);
    font-size: 0.9em;
  }

  .gallery-download-option:last-child {
    border-bottom: none;
  }

  .gallery-download-option:hover {
    background: var(--background);
  }

  .gallery-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
  }

  .playback-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 1rem;
    background: var(--background);
    border-radius: 8px;
    margin-top: 1rem;
  }

  .speed-control {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .speed-control label {
    color: var(--text-primary);
    font-size: 0.9em;
    white-space: nowrap;
  }

  .speed-control input[type="range"] {
    width: 150px;
  }

  .speed-value {
    color: var(--primary);
    font-weight: 600;
    min-width: 40px;
  }

  .info-box {
    background: var(--background);
    border-left: 4px solid var(--primary);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
    color: var(--text-secondary);
  }

  .info-box h3 {
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 0.5rem;
  }

  @media (max-width: 768px) {
    .canvas-wrapper {
      width: 100% !important;
    }

    #signature-canvas,
    #playback-canvas {
      width: 100% !important;
      height: auto !important;
    }

    .controls {
      flex-direction: column;
      align-items: stretch;
    }

    .btn {
      width: 100%;
    }

    .playback-controls {
      flex-direction: column;
      align-items: stretch;
    }

    .speed-control {
      flex-direction: column;
      align-items: stretch;
    }

    .speed-control input[type="range"] {
      width: 100%;
    }
  }
</style>

<a href="/playground/" class="back-link">← Back to Playground</a>

<div class="demo-wrapper">
  <h1>✍️ Signature Pad</h1>
  <p class="subtitle">Draw your signature and watch it animate with playback controls</p>

  <div class="signature-container">
    <h3 style="color: var(--text-primary); margin-top: 0;">Draw Your Signature</h3>
    <div class="canvas-wrapper">
      <canvas id="signature-canvas" width="700" height="300"></canvas>
      <canvas id="playback-canvas" width="700" height="300"></canvas>
    </div>

    <div class="controls">
      <div class="control-group">
        <label for="pen-color">Pen:</label>
        <input type="color" id="pen-color" value="#000000">
      </div>

      <div class="control-group">
        <label for="bg-color">Background:</label>
        <input type="color" id="bg-color" value="#ffffff">
      </div>

      <div class="control-group">
        <label for="pen-width">Width:</label>
        <input type="range" id="pen-width" min="0.5" max="5" step="0.5" value="2">
        <div class="width-preview">
          <span id="width-preview" style="width: 4px; height: 4px;"></span>
        </div>
      </div>

      <button class="btn btn-secondary" id="undo-btn" disabled>↶ Undo</button>
      <button class="btn btn-secondary" id="redo-btn" disabled>↷ Redo</button>
      <button class="btn btn-danger" id="clear-btn">Clear</button>

      <div class="save-menu">
        <button class="btn" id="save-btn" disabled>💾 Save</button>
        <div class="save-dropdown" id="save-dropdown">
          <div class="save-option" data-format="png">📄 Save as PNG</div>
          <div class="save-option" data-format="jpg">📄 Save as JPG</div>
          <div class="save-option" data-format="svg">📐 Save as SVG</div>
          <div class="save-option" data-format="svg-bg">📐 Save as SVG (with background)</div>
        </div>
      </div>

      <button class="btn" id="add-to-gallery-btn" disabled>🖼️ Add to Gallery</button>
    </div>

    <div class="playback-controls" id="playback-controls" style="display: none;">
      <button class="btn" id="play-btn">▶ Play</button>
      <button class="btn btn-secondary" id="pause-btn" disabled>⏸ Pause</button>
      <button class="btn btn-secondary" id="restart-btn">⏮ Restart</button>

      <div class="speed-control">
        <label for="speed-slider">Speed:</label>
        <input type="range" id="speed-slider" min="0.25" max="3" step="0.25" value="1">
        <span class="speed-value" id="speed-value">1x</span>
      </div>
    </div>
  </div>

  <div class="info-box">
    <h3>💡 How to Use</h3>
    <ul style="line-height: 1.8; margin: 0.5rem 0;">
      <li><strong>Draw:</strong> Click and drag (or touch on mobile) to create your signature</li>
      <li><strong>Customize:</strong> Change pen color, width, and background color</li>
      <li><strong>Undo/Redo:</strong> Navigate through your drawing history</li>
      <li><strong>Play:</strong> After drawing, use the play button to animate your signature being written</li>
      <li><strong>Speed Control:</strong> Adjust playback speed from 0.25x (slow) to 3x (fast)</li>
      <li><strong>Save:</strong> Choose from PNG, JPG, SVG formats</li>
      <li><strong>Gallery:</strong> Save multiple signatures and load them later</li>
    </ul>
  </div>

  <div class="info-box">
    <h3>🎨 Features</h3>
    <ul style="line-height: 1.8; margin: 0.5rem 0;">
      <li>Smooth drawing with variable pen pressure</li>
      <li>Customizable pen color, width, and background</li>
      <li>Full undo/redo support</li>
      <li>Animated playback that recreates your drawing stroke by stroke</li>
      <li>Adjustable animation speed with real-time preview</li>
      <li>Pause and resume animation at any time</li>
      <li>Export to PNG, JPG, or SVG (with or without background)</li>
      <li>Gallery system to save and manage multiple signatures</li>
      <li>Touch-friendly for tablets and mobile devices</li>
    </ul>
  </div>

  <div class="gallery-section">
    <h3>🖼️ Signature Gallery</h3>
    <p style="color: var(--text-secondary); margin: 0 0 1rem 0;">Save your signatures to the gallery and load them later</p>
    <div class="gallery-grid" id="gallery-grid">
      <div class="gallery-empty">No saved signatures yet. Draw and add to gallery!</div>
    </div>
  </div>

  <div class="info-box">
    <h3>📚 Credits</h3>
    <p style="margin: 0;">
      Built with <a href="https://github.com/szimek/signature_pad" target="_blank" rel="noopener" style="color: var(--primary); text-decoration: underline;">Signature Pad</a> by <a href="https://github.com/szimek" target="_blank" rel="noopener" style="color: var(--primary); text-decoration: underline;">Szymon Nowak</a> - A smooth signature drawing library for HTML5 canvas.
    </p>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/signature_pad@5.1.3/dist/signature_pad.umd.min.js"></script>
<script>
  const canvas = document.getElementById('signature-canvas');
  const playbackCanvas = document.getElementById('playback-canvas');
  const clearBtn = document.getElementById('clear-btn');
  const undoBtn = document.getElementById('undo-btn');
  const redoBtn = document.getElementById('redo-btn');
  const saveBtn = document.getElementById('save-btn');
  const saveDropdown = document.getElementById('save-dropdown');
  const addToGalleryBtn = document.getElementById('add-to-gallery-btn');
  const penColorInput = document.getElementById('pen-color');
  const bgColorInput = document.getElementById('bg-color');
  const penWidthInput = document.getElementById('pen-width');
  const widthPreview = document.getElementById('width-preview');
  const playBtn = document.getElementById('play-btn');
  const pauseBtn = document.getElementById('pause-btn');
  const restartBtn = document.getElementById('restart-btn');
  const speedSlider = document.getElementById('speed-slider');
  const speedValue = document.getElementById('speed-value');
  const playbackControls = document.getElementById('playback-controls');
  const galleryGrid = document.getElementById('gallery-grid');

  // Initialize SignaturePad
  const signaturePad = new SignaturePad(canvas, {
    backgroundColor: 'rgb(255, 255, 255)',
    penColor: 'rgb(0, 0, 0)',
    minWidth: 1,
    maxWidth: 3
  });

  // Undo/Redo history
  let undoHistory = [];
  let redoHistory = [];

  // Playback state
  let isPlaying = false;
  let isPaused = false;
  let animationFrameId = null;
  let playbackSpeed = 1;
  let currentStrokeIndex = 0;
  let currentPointIndex = 0;
  let playbackData = null;

  // Gallery state
  const GALLERY_KEY = 'signature-gallery';

  // Handle signature changes
  signaturePad.addEventListener('endStroke', () => {
    saveToUndoHistory();
    redoHistory = []; // Clear redo history on new stroke
    updateButtonStates();
  });

  function saveToUndoHistory() {
    const data = signaturePad.toData();
    undoHistory.push(JSON.parse(JSON.stringify(data)));
    if (undoHistory.length > 50) { // Limit history
      undoHistory.shift();
    }
  }

  function updateButtonStates() {
    const isEmpty = signaturePad.isEmpty();
    saveBtn.disabled = isEmpty;
    addToGalleryBtn.disabled = isEmpty;
    undoBtn.disabled = undoHistory.length === 0;
    redoBtn.disabled = redoHistory.length === 0;

    if (!isEmpty) {
      playbackControls.style.display = 'flex';
      playbackData = signaturePad.toData();
    } else {
      playbackControls.style.display = 'none';
      stopPlayback();
    }
  }

  // Pen color
  penColorInput.addEventListener('input', (e) => {
    signaturePad.penColor = e.target.value;
  });

  // Background color
  bgColorInput.addEventListener('input', (e) => {
    signaturePad.backgroundColor = e.target.value;
    const data = signaturePad.toData();
    signaturePad.clear();
    signaturePad.fromData(data);
  });

  // Pen width
  penWidthInput.addEventListener('input', (e) => {
    const width = parseFloat(e.target.value);
    signaturePad.minWidth = width * 0.5;
    signaturePad.maxWidth = width * 1.5;

    // Update preview
    const previewSize = width * 2;
    widthPreview.style.width = `${previewSize}px`;
    widthPreview.style.height = `${previewSize}px`;
  });

  // Clear button
  clearBtn.addEventListener('click', () => {
    signaturePad.clear();
    const ctx = playbackCanvas.getContext('2d');
    ctx.clearRect(0, 0, playbackCanvas.width, playbackCanvas.height);
    stopPlayback();
    undoHistory = [];
    redoHistory = [];
    updateButtonStates();
  });

  // Undo button
  undoBtn.addEventListener('click', () => {
    if (undoHistory.length > 0) {
      const currentData = signaturePad.toData();
      redoHistory.push(JSON.parse(JSON.stringify(currentData)));

      undoHistory.pop();
      const previousData = undoHistory[undoHistory.length - 1] || [];
      signaturePad.fromData(previousData);
      updateButtonStates();
    }
  });

  // Redo button
  redoBtn.addEventListener('click', () => {
    if (redoHistory.length > 0) {
      const redoData = redoHistory.pop();
      signaturePad.fromData(redoData);
      undoHistory.push(JSON.parse(JSON.stringify(redoData)));
      updateButtonStates();
    }
  });

  // Save menu toggle
  saveBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    saveDropdown.classList.toggle('show');
  });

  // Close dropdown when clicking outside
  document.addEventListener('click', () => {
    saveDropdown.classList.remove('show');
    document.querySelectorAll('.gallery-download-dropdown').forEach(d => {
      d.classList.remove('show');
    });
  });

  // Save options
  document.querySelectorAll('.save-option').forEach(option => {
    option.addEventListener('click', (e) => {
      e.stopPropagation();
      const format = option.dataset.format;
      downloadSignature(format);
      saveDropdown.classList.remove('show');
    });
  });

  function downloadSignature(format) {
    let dataURL;
    let filename;

    switch(format) {
      case 'png':
        dataURL = signaturePad.toDataURL('image/png');
        filename = `signature-${Date.now()}.png`;
        break;
      case 'jpg':
        dataURL = signaturePad.toDataURL('image/jpeg', 0.95);
        filename = `signature-${Date.now()}.jpg`;
        break;
      case 'svg':
        dataURL = signaturePad.toDataURL('image/svg+xml');
        filename = `signature-${Date.now()}.svg`;
        break;
      case 'svg-bg':
        dataURL = signaturePad.toDataURL('image/svg+xml', { includeBackgroundColor: true });
        filename = `signature-${Date.now()}.svg`;
        break;
    }

    downloadFile(dataURL, filename);
  }

  function downloadFile(dataURL, filename) {
    const link = document.createElement('a');
    link.download = filename;
    link.href = dataURL;
    link.click();
  }

  // Gallery functionality
  function loadGallery() {
    const gallery = JSON.parse(localStorage.getItem(GALLERY_KEY) || '[]');

    if (gallery.length === 0) {
      galleryGrid.innerHTML = '<div class="gallery-empty">No saved signatures yet. Draw and add to gallery!</div>';
      return;
    }

    galleryGrid.innerHTML = gallery.map((item, index) => `
      <div class="gallery-item" data-index="${index}">
        <img src="${item.thumbnail}" alt="Signature ${index + 1}">
        <div class="gallery-item-actions">
          <button class="gallery-item-btn load-btn" data-index="${index}">Load</button>
          <div class="gallery-download-menu">
            <button class="gallery-item-btn download-btn" data-index="${index}">Download</button>
            <div class="gallery-download-dropdown" id="gallery-download-${index}">
              <div class="gallery-download-option" data-index="${index}" data-format="png">PNG</div>
              <div class="gallery-download-option" data-index="${index}" data-format="jpg">JPG</div>
              <div class="gallery-download-option" data-index="${index}" data-format="svg">SVG</div>
              <div class="gallery-download-option" data-index="${index}" data-format="svg-bg">SVG+BG</div>
            </div>
          </div>
          <button class="gallery-item-btn delete" data-index="${index}">Delete</button>
        </div>
      </div>
    `).join('');

    // Add event listeners
    document.querySelectorAll('.load-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        const index = parseInt(e.target.dataset.index);
        loadFromGallery(index);
      });
    });

    document.querySelectorAll('.download-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        const index = parseInt(e.target.dataset.index);
        const dropdown = document.getElementById(`gallery-download-${index}`);

        // Close all other dropdowns
        document.querySelectorAll('.gallery-download-dropdown').forEach(d => {
          if (d !== dropdown) d.classList.remove('show');
        });

        dropdown.classList.toggle('show');
      });
    });

    document.querySelectorAll('.gallery-download-option').forEach(option => {
      option.addEventListener('click', (e) => {
        e.stopPropagation();
        const index = parseInt(e.target.dataset.index);
        const format = e.target.dataset.format;
        downloadFromGallery(index, format);
        document.getElementById(`gallery-download-${index}`).classList.remove('show');
      });
    });

    document.querySelectorAll('.gallery-item-btn.delete').forEach(btn => {
      btn.addEventListener('click', (e) => {
        const index = parseInt(e.target.dataset.index);
        deleteFromGallery(index);
      });
    });
  }

  addToGalleryBtn.addEventListener('click', () => {
    if (signaturePad.isEmpty()) return;

    const gallery = JSON.parse(localStorage.getItem(GALLERY_KEY) || '[]');
    const thumbnail = signaturePad.toDataURL('image/png');
    const data = signaturePad.toData();

    gallery.push({
      thumbnail,
      data,
      timestamp: Date.now()
    });

    localStorage.setItem(GALLERY_KEY, JSON.stringify(gallery));
    loadGallery();

    // Show feedback
    addToGalleryBtn.textContent = '✓ Added!';
    setTimeout(() => {
      addToGalleryBtn.textContent = '🖼️ Add to Gallery';
    }, 2000);
  });

  function loadFromGallery(index) {
    const gallery = JSON.parse(localStorage.getItem(GALLERY_KEY) || '[]');
    if (gallery[index]) {
      signaturePad.fromData(gallery[index].data);
      undoHistory = [JSON.parse(JSON.stringify(gallery[index].data))];
      redoHistory = [];
      updateButtonStates();
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  }

  function downloadFromGallery(index, format = 'png') {
    const gallery = JSON.parse(localStorage.getItem(GALLERY_KEY) || '[]');
    if (gallery[index]) {
      // Load signature temporarily to export in desired format
      const currentData = signaturePad.toData();
      const currentBgColor = signaturePad.backgroundColor;

      signaturePad.fromData(gallery[index].data);

      let dataURL;
      let filename;
      const timestamp = gallery[index].timestamp;

      switch(format) {
        case 'png':
          dataURL = signaturePad.toDataURL('image/png');
          filename = `signature-${timestamp}.png`;
          break;
        case 'jpg':
          dataURL = signaturePad.toDataURL('image/jpeg', 0.95);
          filename = `signature-${timestamp}.jpg`;
          break;
        case 'svg':
          dataURL = signaturePad.toDataURL('image/svg+xml');
          filename = `signature-${timestamp}.svg`;
          break;
        case 'svg-bg':
          dataURL = signaturePad.toDataURL('image/svg+xml', { includeBackgroundColor: true });
          filename = `signature-${timestamp}.svg`;
          break;
      }

      downloadFile(dataURL, filename);

      // Restore previous signature
      if (currentData.length > 0) {
        signaturePad.fromData(currentData);
      } else {
        signaturePad.clear();
      }
    }
  }

  function deleteFromGallery(index) {
    const gallery = JSON.parse(localStorage.getItem(GALLERY_KEY) || '[]');
    gallery.splice(index, 1);
    localStorage.setItem(GALLERY_KEY, JSON.stringify(gallery));
    loadGallery();
  }

  // Playback animation
  function startPlayback() {
    if (!playbackData || playbackData.length === 0) return;

    isPlaying = true;
    isPaused = false;
    playBtn.textContent = '▶ Play';
    playBtn.disabled = true;
    pauseBtn.disabled = false;
    pauseBtn.textContent = '⏸ Pause';

    const ctx = playbackCanvas.getContext('2d');
    ctx.clearRect(0, 0, playbackCanvas.width, playbackCanvas.height);

    canvas.style.opacity = '0.1';
    animateSignature();
  }

  function animateSignature() {
    if (!isPlaying || isPaused) return;

    const ctx = playbackCanvas.getContext('2d');

    if (currentStrokeIndex >= playbackData.length) {
      stopPlayback(true);
      return;
    }

    const stroke = playbackData[currentStrokeIndex];
    const pointsPerFrame = Math.max(1, Math.floor(playbackSpeed * 2));

    for (let i = 0; i < pointsPerFrame && currentPointIndex < stroke.points.length; i++) {
      if (currentPointIndex === 0) {
        ctx.beginPath();
        const point = stroke.points[currentPointIndex];
        ctx.moveTo(point.x, point.y);
      } else {
        const point = stroke.points[currentPointIndex];
        const prevPoint = stroke.points[currentPointIndex - 1];

        ctx.lineWidth = (point.pressure || 0.5) * 2;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.strokeStyle = stroke.penColor || 'rgb(0, 0, 0)';

        ctx.quadraticCurveTo(
          prevPoint.x,
          prevPoint.y,
          (prevPoint.x + point.x) / 2,
          (prevPoint.y + point.y) / 2
        );
        ctx.stroke();
      }

      currentPointIndex++;
    }

    if (currentPointIndex >= stroke.points.length) {
      currentStrokeIndex++;
      currentPointIndex = 0;
    }

    animationFrameId = requestAnimationFrame(animateSignature);
  }

  function stopPlayback(completed = false) {
    isPlaying = false;
    isPaused = false;

    if (animationFrameId) {
      cancelAnimationFrame(animationFrameId);
      animationFrameId = null;
    }

    playBtn.disabled = false;
    pauseBtn.disabled = true;
    canvas.style.opacity = '1';

    if (completed) {
      currentStrokeIndex = 0;
      currentPointIndex = 0;
      const ctx = playbackCanvas.getContext('2d');
      ctx.clearRect(0, 0, playbackCanvas.width, playbackCanvas.height);
    }
  }

  function pausePlayback() {
    isPaused = true;
    pauseBtn.textContent = '▶ Resume';
    pauseBtn.disabled = false;
    playBtn.disabled = true;
  }

  function resumePlayback() {
    isPaused = false;
    pauseBtn.textContent = '⏸ Pause';
    animateSignature();
  }

  playBtn.addEventListener('click', () => {
    currentStrokeIndex = 0;
    currentPointIndex = 0;
    startPlayback();
  });

  pauseBtn.addEventListener('click', () => {
    if (isPaused) {
      resumePlayback();
    } else {
      pausePlayback();
    }
  });

  restartBtn.addEventListener('click', () => {
    stopPlayback();
    const ctx = playbackCanvas.getContext('2d');
    ctx.clearRect(0, 0, playbackCanvas.width, playbackCanvas.height);
    currentStrokeIndex = 0;
    currentPointIndex = 0;
  });

  speedSlider.addEventListener('input', (e) => {
    playbackSpeed = parseFloat(e.target.value);
    speedValue.textContent = `${playbackSpeed}x`;
  });

  function resizeCanvas() {
    const ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext('2d').scale(ratio, ratio);

    playbackCanvas.width = playbackCanvas.offsetWidth * ratio;
    playbackCanvas.height = playbackCanvas.offsetHeight * ratio;
    playbackCanvas.getContext('2d').scale(ratio, ratio);

    signaturePad.clear();
  }

  window.addEventListener('resize', resizeCanvas);

  // Initialize
  updateButtonStates();
  loadGallery();
</script>