Add static logo generator with canvas and download

2025-09-12 13:14:39 +10:00 · 2025-09-12 13:14:39 +10:00 · 5f7e3dad8e
parent ad1d8a740a
commit 5f7e3dad8e
2 changed files with 114 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Canvas Logo Generator</title>
+  <style>
+    body {
+      font-family: sans-serif;
+      padding: 20px;
+      background: #f0f0f0;
+    }
+    form {
+      margin-bottom: 10px;
+    }
+    canvas {
+      border: 1px solid #ccc;
+      display: block;
+      margin-bottom: 10px;
+    }
+  </style>
+</head>
+<body>
+  <form id="logoForm">
+    <label>Upper: <input type="text" id="upperText" name="Upper"></label>
+    <label>Lower: <input type="text" id="lowerText" name="Lower"></label>
+    <label>Background:
+      <select id="bgColor" name="Background">
+        <option value="#c0392b">Red</option>
+        <option value="#d35400">Orange</option>
+        <option value="#f39c12">Amber</option>
+        <option value="#27ae60">Green</option>
+        <option value="#16a085">Teal</option>
+        <option value="#2980b9">Blue</option>
+        <option value="#8e44ad">Purple</option>
+        <option value="#7f8c8d">Gray</option>
+      </select>
+    </label>
+  </form>
+
+  <canvas id="logoCanvas" width="80" height="80"></canvas>
+  <button id="downloadBtn">Download PNG</button>
+
+  <script src="script.js"></script>
+</body>
+</html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,69 @@
+(function() {
+  const canvas = document.getElementById('logoCanvas');
+  const ctx = canvas.getContext('2d');
+  const upperInput = document.getElementById('upperText');
+  const lowerInput = document.getElementById('lowerText');
+  const colorSelect = document.getElementById('bgColor');
+  const downloadBtn = document.getElementById('downloadBtn');
+
+  const PADDING = 15;
+  const LINE_WIDTH = 2;
+
+  function fitText(text, maxWidth, maxHeight) {
+    let size = maxHeight;
+    ctx.font = `bold ${size}px sans-serif`;
+    while (ctx.measureText(text).width > maxWidth && size > 8) {
+      size--;
+      ctx.font = `bold ${size}px sans-serif`;
+    }
+    return size;
+  }
+
+  function draw() {
+    const width = canvas.width;
+    const height = canvas.height;
+    ctx.clearRect(0, 0, width, height);
+
+    ctx.fillStyle = colorSelect.value;
+    ctx.fillRect(0, 0, width, height);
+
+    ctx.strokeStyle = 'white';
+    ctx.lineWidth = LINE_WIDTH;
+    const yLine = height / 2;
+    ctx.beginPath();
+    ctx.moveTo(PADDING, yLine);
+    ctx.lineTo(width - PADDING, yLine);
+    ctx.stroke();
+
+    const availableWidth = width - PADDING * 2;
+    const availableHeight = height - PADDING * 2;
+    const halfHeight = availableHeight / 2;
+
+    ctx.fillStyle = 'white';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    const upper = upperInput.value.toUpperCase();
+    let fontSize = fitText(upper, availableWidth, halfHeight);
+    ctx.font = `bold ${fontSize}px sans-serif`;
+    ctx.fillText(upper, width / 2, PADDING + halfHeight / 2);
+
+    const lower = lowerInput.value.toUpperCase();
+    fontSize = fitText(lower, availableWidth, halfHeight);
+    ctx.font = `bold ${fontSize}px sans-serif`;
+    ctx.fillText(lower, width / 2, height - PADDING - halfHeight / 2);
+  }
+
+  upperInput.addEventListener('input', draw);
+  lowerInput.addEventListener('input', draw);
+  colorSelect.addEventListener('change', draw);
+
+  downloadBtn.addEventListener('click', function() {
+    const link = document.createElement('a');
+    link.download = 'logo.png';
+    link.href = canvas.toDataURL('image/png');
+    link.click();
+  });
+
+  draw();
+})();